在Angular中,可以使用ngFor指令来迭代并创建新行。
首先,在组件类中定义一个数组来存储要迭代的数据:
export class AppComponent {
data = [
{ name: 'John', age: 30 },
{ name: 'Jane', age: 25 },
{ name: 'Bob', age: 40 }
];
}
然后,在模板中使用ngFor指令来迭代数组,并在每次迭代时创建新行:
{{ item.name }}
{{ item.age }}
在上面的示例中,*ngFor指令会遍历data数组,并为数组中的每个对象创建一个新的
当数据发生变化时,Angular会自动更新DOM,以反映新的行。
请确保在你的模块中导入了FormsModule,以便使用ngFor指令:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
imports: [BrowserModule, FormsModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
以上就是在Angular中使用ngFor指令迭代并创建新行的示例代码。