Реактивные циклы в Angular
Реактивность также будет работать в цикле
ngFor
. Это значит, что при изменениях
массива, эти изменения сразу отобразятся
на экране.
Давайте попробуем на практике. Пусть у нас есть следующий массив:
export class AppComponent {
public arr: string[] = ['a', 'b', 'c', 'd'];
}
Выведем наш массив в цикле в виде списка:
<ul>
<li *ngFor="let elem of arr">
{{ elem }}
</li>
</ul>
Сделаем кнопку, по клику на которую будет вызываться метод класса:
<button (click)="add()">
add
</button>
В этом методе как-то изменим наш массив, например, добавим в него новый элемент:
export class AppComponent {
public text: string = '';
public add(): void {
this.arr.push('!');
}
}
Теперь, если запустить код и нажать на кнопку, то сразу после нажатия в списке появится новый элемент.
Дан массив. Выведите его элементы в цикле. Сделайте кнопку, по нажатию на которую из массива будет удаляться последний элемент.