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

Question

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

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

HTML

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

Ts

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

Спасибо.

Answer 1

Убедитесь, что вы указали this.itens, и при использовании *ngFor рекомендуется создать новый экземпляр массива с помощью деконструкции или 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/

Answer 2

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

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);
}