Меню ×
Директива ngFor

Директива ngFor

В файле \app\servers\servers.component.html:

Заменим:

	
<app-server></app-server>
<app-server></app-server>
	

На:

	
<app-server *ngFor="let server of servers"></app-server>
	

В файле \app\servers\servers.component.ts определим переменную servers:

	
servers = ['Test1', 'Test2'];
serverName = 'NewServer';

onServerCreate() {
  this.servers.push(this.serverName);
  this.serverStatus = "Server is ON";
  this.serverCreated = true;
}
	

Теперь, блоки app-server будут генерироваться автоматически, из списка.

Получить номер итерации можно так:

	
*ngFor="let server of servers; let i = index"
	

Похожие материалы

Angular применяется для создания одностраничных приложений - SPA (Single Page Applications). Angular создает рендер программы, в отличие от подхода, когда весь контент загружен в DOM, а JavaScript его меняет.

Использование интерфейсов CanActivate и CanActivateChild для принятия решения об активации роутера

В данном руководстве пойдет речь о селекторе, Databinding, интерполяции, связывание свойств и многом другом.

наверх