Angular 7: как обновлять значение переменной в html после изменений в файле ts

#javascript #angular #forms

#javascript #angular #формы

Вопрос:

У меня есть значение, которое передается в html при загрузке страницы, но это значение меняется, когда я использую другие функции, а затем переменная больше не обновляется в html.

Я пытался использовать ngModel, но это не сработало, потому что у меня есть один массив объектов и один объект.

HTML

 <div *ngFor="let item of itens">            
     <textarea class="textarea" id="item-textarea" [value]="item.text"> 
     </textarea>
</div>

 public itens:any[] = [];

constructor() {

}

ngOnInit() {
    this.initItens();
    this.changeItens();
}

initItens() {
    let item = new Item();
    item.text = "Hello world";
    return itens.push(item);
}

changeItens() {
    let item = new Item();
    item.text = "Bye bye World";
    return itens.push(item);
}

Я хотел бы знать, как я мог бы постоянно обновлять переменные itens и item (item.text) в HTML, когда они были обновлены в файле .ts

Спасибо.

1. Можете ли вы показать случай, когда значение неверно в выводе HTML? Код, приведенный в вопросе, похоже, дает правильный результат. Смотрите этот stackblitz (где return itens.push(item) был заменен на return this.itens.push(item) ).

2. [value]="item.text" должно всегда отражать значение. Я подозреваю, что проблема в другой части кода, отличной от той, которую вы опубликовали здесь.

3. Можете ли вы попробовать this.itens.push(item) вместо itens.push(item) ?

4. Вот и все! Разве ваш редактор не жалуется на itens is undefined ? Если нет, то должно. Правильный синтаксис this.itens . Вероятно, вы также получаете ошибку в консоли.

5. Да, и мы только что рассказали вам, почему 🙂

Ответ №1:

Почему ваши функции возвращают массив? Вероятно, это должно быть что-то вроде

 initItens() {
    let item = new Item();
    item.text = "Hello world";
    this.itens.push(item);
}

changeItens() {
    let item = new Item();
    item.text = "Bye bye World";
    this.itens.push(item);
}

1. Бах, что, если они это сделают? Я не думаю, что это что-то меняет. Возвращаемое значение ничем не используется, вот и все.

2. Точно, массив itens на самом деле не изменяется, поэтому значение не меняется.

Ответ №2:

Убедитесь, что вы ссылаетесь на this.itens и при использовании *ngFor рекомендуется создать новый экземпляр массива с помощью deconstruction или Array.slice()

Пример деконструкции:

  let item = new Item();
 item.text = "Hello world";
 this.itens = [...this.itens, item];

Пример Slice():

  let item = new Item();
 item.text = "Hello world";
 this.itens = this.itens.slice();
 this.itens.push(item);

Вот хороший учебник по ngFor

https://malcoded.com/posts/angular-ngfor/