如何在angular5中使用样式动态添加输入字段 [英] How to append input field dynamically with styles in angular5

问题描述

当我单击按钮时，我试图动态地添加元素. 实际上，当我单击一个按钮时，元素会很好地附加. 但是问题是功能和样式不起作用. 我的代码在下面.

I'm trying to append elements dynamically when I click a button. Actually when I click a button, elements append well. But the problem is that function and style is not worked. My code is below.

P.S.我正在使用angular5

HTML

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

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>
}

推荐答案

在这里:

组件侧:

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>

链接到 工作演示

Link to WORKING DEMO

这篇关于如何在angular5中使用样式动态添加输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！