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

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

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

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

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

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

пример стекблиц

@Shubham Это не сработает, выдаст ошибку.

Anurag Srivastava 22.05.2019 11:20

@Shubham, это не сработает, так как {{ }} используется только для печати вывода.

Sunil Kashyap 22.05.2019 11:20

возможный дубликат stackoverflow.com/questions/48959117/…

Dulanjaya Tennekoon 22.05.2019 11:24

Всем спасибо, проверял можно или нет

ShibinRagh 22.05.2019 11:26

Разобрался. Проверьте мой ответ

Dulanjaya Tennekoon 22.05.2019 11:35
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
5
5
11 844
5
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

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

Ну, не официально, но с небольшим хаком можно.

Fasco 26.09.2019 16:46

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

Ответ принят как подходящий

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

<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>

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

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

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

Другие вопросы по теме