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() {
    // I want append below code whenever I click.
    <tr>
      <td style="padding: 30px">
        <input type="file" accept="image/png, image/gif, image/jpeg, image/bmp, image/x-icon" (click)="alert('$event')">
      </td>
      <td style="padding: 30px">
        <input type="file" accept="image/png, image/gif, image/jpeg, image/bmp, image/x-icon" (click)="test2(file)">
      </td>
    </tr>
    <tr>
      <td style="padding: 30px">
          <input  placeholder="image Info" type="text" size="25">
      </td>
      <td style="padding: 30px">
          <input placeholder="image Info" type="text" size="25">
      </td>
    </tr>
}

Answer 1

你走了：

组件方：

this.rows = [];

addTbody() {
    this.rows.push(1);
}

模板方：

<table style="text-align: center; width: 100%">
    <tbody>
        <ng-container *ngFor='let row of rows'>
            <tr>
                <td style="padding: 30px">
                    <input type="file" accept="image/png, image/gif, image/jpeg, image/bmp, image/x-icon" (click)="alert('$event')">
                </td>
                <td style="padding: 30px">
                    <input type="file" accept="image/png, image/gif, image/jpeg, image/bmp, image/x-icon" (click)="test2(file)">
                </td>
            </tr>
            <tr>
                <td style="padding: 30px">
                    <input  placeholder="image Info" type="text" size="25">
                </td>
                <td style="padding: 30px">
                    <input placeholder="image Info" type="text" size="25">
                </td>
            </tr>
        </ng-container>
    </tbody>
</table>

链接到 WORKING DEMO

如何使用angular5

1 个答案: