单击添加按钮Angular 7时动态创建li

问题描述

我是新来的有角用户，想每次单击按钮“添加地址”时添加地址。我希望它是动态的，然后我将提交。

HTML：

<div class="form-group">
      <label for="name">Address: </label>
      <div>
        <button type="button" class="btn btn-info" (click)="addAddress()" >Add Address</button>
      </div>
      <div>
        <ul>
          <li *ngFor="let add of contact.address | async">
            <label for="name">Type</label>
            <input type="text" class="form-control" id="atype" required [(ngModel)]="add.type" name="atype">
            ....
          </li>
        </ul>
      </div>
    </div>

TS：

addAddress() {
    let add = {
      id: 0,type: '',number: 0,street: '',unit: '',city: '',state: '',zipcode: ''
    };
    this.contact.Address.push(add);
  }

当我单击它时，除了我提交时什么都不做

我创建了空数组：

Address: [{id: 0,type: "",street: "",unit: "",city: "",state: "",zipcode: ""},…]
0: {id: 0,zipcode: ""}
1: {id: 0,zipcode: ""}
2: {id: 0,zipcode: ""}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angular angular7 html