Присвойте значение переменной в шаблоне - Angular7

Question

Есть две кнопки переключения (редактировать и отправить), какая кнопка должна работать как стиль переключения / показа при нажатии

<button (click)="showEditBtn = false;" *ngIf="showEditBtn;"> Edit</button>
<button (click)="showEditBtn =  true;" *ngIf="!showEditBtn;">Submit</button> 

я нуждаюсь showEditBtn переменная должна быть true по умолчанию, не трогая файл скрипта

Можно ли присвоить значение переменной в шаблоне, как в примере ниже?

<div> {{  let showEditBtn = true  }}  </div>

Пример стекаблица

Answer 1

Разобрался. Это немного взломать. Но работает отлично

<div *ngIf="true; let showEditBtn">
   <div> {{  showEditBtn   }}  </div>
   <button    (click)="showEditBtn = false;" *ngIf="showEditBtn;"> Edit</button>
   <button (click)="showEditBtn =  true;" *ngIf="!showEditBtn;">Submit</button>
</div>

Answer 2

Вы не можете создать или установить значение в переменной внутри интерполяции {{ }}, интерполяция используется только для вывода на печать (значение переменной).

Answer 3

Angular Interpolation - это способ привязки данных в Angular. И это позволит пользователю общаться между компонентом и его шаблоном (представление).

Строковая интерполяция - это односторонняя привязка данных. При одностороннем связывании данных значение модели вставляется в элемент HTML (DOM), и обновить модель из представления невозможно.

Надеюсь, что данная ссылка может помочь понять.

Answer 4

Я настоятельно рекомендую не устанавливать или обновлять переменные в вашем шаблоне. Вся ваша логика должна быть в контроллере.

Вот простой пример того, как вы можете сделать это app.component.ts:

  public isEditMode: boolean;
  public toggleEditMode(): void {
      this.isEditMode = !this.isEditMode;
  }

app.component.html

<button (click)="toggleEditMode()" *ngIf="isEditMode;"> Edit</button>
<button (click)="toggleEditMode()" *ngIf="!isEditMode;">Submit</button>

Answer 5

В Angular2+ нет способа инициализировать значение переменной в шаблоне. Вы должны посмотреть в ngOnInit() функция.