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

Question

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

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

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

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

<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. И это позволит пользователю общаться между компонентом и его шаблоном (представление).

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

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

Answer 4

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

Answer 5

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

вот простой пример того, как вы можете это сделать 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>