如何创建新的部分,在angular2中单击新按钮

发布时间：2020-12-17 17:30:10 所属栏目：安全来源：网络整理

导读：我有一个包含3个字段的部分,当点击新按钮时,我必须得到相同的部分.我没有错误,所以我没有得到我错的地方 Example here HTML： form *ngFor="let emergency of Emergencies; let i = index" div label Name/label input type="text" [(ngModel)]="emergency.N

我有一个包含3个字段的部分,当点击新按钮时,我必须得到相同的部分.我没有错误,所以我没有得到我错的地方

Example here

HTML：

<form *ngFor="let emergency of Emergencies; let i = index">
        <div>
          <label > Name</label>
  <input type="text"   [(ngModel)]="emergency.Name" name="emergency.Name" 
          />
        </div>
        <div>
          <label >Phone</label>
          <input type="text" OnlyNumber="true" [(ngModel)]="emergency.Phone" name="emergency.Phone"
            maxlength="15" />
        </div>
        <div>
          <label >Relations</label>
          <select class="col-lg-6 col-md-6 col-sm-6 col-xs-6"[(ngModel)]="emergency.ship">
            <option >{{ship.Description}}</option>
          </select>
        </div>
      </div>
    </form>

解决方法

如果你可以使用模板驱动的表格,这里有一个答案.

添加用于创建新字段的按钮

<button (click)="addEmergency()">New</button>

现在,在组件中添加addEmergency方法：

addEmergency() {
    var item = {
      "ContactName":"Person3","Phone": "122355","relationship": ""
      }
    this.Emergencies.push(item);
  }

在html中：

<div  *ngFor="let Emergency of Emergencies">
  Your inputs go here
</div>

Here is a demo I created out from your code

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!