Question

我正在尝试动态生成卡和卡内的内容。我可以动态生成内容，但是我不知道每次生成内容时如何动态生成单独的卡。实际上，动态生成的内容都在同一张卡中，但是我想要在另一张卡中

HTML

<div class="card">
  <div class="card-body">
<div class="row">
<div class="col-lg-4 col-4">
<div *ngFor="let cities of city; let in=index" class="col-sm-3">
    <div class="form-group form-group-lg">
  City:    <input type="text" [(ngModel)]="city[in].value" name="name{{in}}" class="form-control" #name="ngModel" required />
    </div>
    <br />
</div>
</div>

<div class="col-lg-4 col-4">
<div *ngFor="let states of state; let in=index" class="col-sm-3">
    <div class="form-group form-group-lg">
  State:    <input type="text" [(ngModel)]="state[in].value" name="names{{in}}" class="form-control" #name="ngModel" required />
    </div>
    <br />
</div>
</div>
<div class="col-lg-4 col-4">
    <div *ngFor="let zips of zip; let in=index" class="col-sm-3">
        <div class="form-group form-group-lg">
      Zipcode:<input type="text" [(ngModel)]="zip[in].value" name="namess{{in}}" class="form-control" #name="ngModel" required />
        </div>
        <br />
    </div>
</div>
    </div>
</div>
</div>
<button class="text-center btn-danger"  (click)="add()">Add input</button>
<br/>
<br/>


<br />
<br />
{{words2 | json}}

TS

  name: String;
  country: String;
  profiles = [];
  city = [{value: ''}];
  state = [{value: ''}];
  zip = [{value: ''}];
  constructor() { }


  add() {
    this.city.push({value: ''});
    this.state.push({value: ''});
    this.zip.push({value: ''});
  }

Stackblitz Link

Answer 1

将*ngFor用于卡片，而不要单独输入每个输入。

使用常规数据模型-因此模型对象数组不是单个模型属性的数组

工作代码： https://stackblitz.com/edit/angular-6aeeuk?file=src/app/app.component.html

此外，您还会滥用Bootstrap表单类，因此现在完全混乱了。请参考Bootstrap的文档和示例，了解如何创建带有标签的表单。

单击按钮即可动态生成卡

1 个答案: