在Angular中,要添加具有相同属性的行,可以采用以下步骤: 1.在.ts文件中定义数据和表格列,以及定义一个方法来添加新行:
import { Component } from '@angular/core';
interface User {
name: string;
age: number;
}
@Component({
selector: 'app-root',
template: `
User list
Name
Age
{{ user.name }}
{{ user.age }}
`,
})
export class AppComponent {
users: User[] = [
{ name: 'Alice', age: 22 },
{ name: 'Bob', age: 31 },
];
columns = ['name', 'age'];
addUser() {
const newUser: User = { name: 'Eve', age: 25 };
this.users.push(newUser);
}
}
2.在HTML文件中使用NgFor指令循环渲染表格行,并在添加按钮上绑定addUser方法。 3.在方法中创建一个新用户对象并将其插入到数据数组中即可。
运行代码后,通过点击“Add user”按钮可以向表格添加一个新行,该行将具有相同的属性(即“name”和“age”)。