Question

我正在尝试在单击按钮时动态追加元素。实际上当我点击一个按钮时，元素会很好地附加。但问题是功能和风格不起作用。我的代码如下。

P.S。我正在使用angular5

HTML

<table style="text-align: center; width: 100%">
    <tbody #tContent>
        <!-- I want to append element in here -->
    </tbody>
</table>
    <button type="button" mat-raised-button color="primary" (click)="addTbody()">click here</button>

TS

    addTbody() {
    ???
}

Answer 1

在这里，以Angular的方式：

组件方

rowData = [];

addTbody() {
    rowData.push({
        name : 'something',
        age : '15',
        ...
    });
}

模板方

<table style="text-align: center; width: 100%">
    <tbody>
        <tr *ngFor='let row of rowData'>
            <td> {{ row.name }} </td>
            <td> {{ row.age }} </td>
        </tr>
    </tbody>
</table>

<button type="button" mat-raised-button color="primary" (click)="addTbody()">click here</button>

尽量避免使用jQuery，同时学习Angular

如何使用angular5中的样式动态追加元素

1 个答案: