物料芯片UI多个字段

时间:2020-08-07 13:00:21

标签: angular-material angular7

我在一个div中有一个输入字段,我在其中循环处理多个数据。当我以角度应用材质Chip UI时,它会自动覆盖到不同的字段。将提供一些代码进行审查!

<div *ngFor="let column of table.columns">
        <p><strong><u>{{column.name}}</u></strong></p>
        <div class="row">
          <div class="col-md-3" *ngFor="let key of column.keys; let i=index">
            <mat-form-field class="input">
              <mat-chip-list #taglist>

                <mat-chip selected color="primary" *ngFor="let Tag of Tags" [selectable]="selectable"
                  [removable]="removable" (removed)="remove(Tag)">
                  {{Tag}}

                  <mat-icon matChipRemove *ngIf="removable">cancel
                  </mat-icon>
                </mat-chip>
                <input placeholder="{{key}}" [matChipInputFor]="taglist"
                  [matChipInputSeparatorKeyCodes]="separatorKeysCodes" (matChipInputTokenEnd)="add($event)" />
              </mat-chip-list>
            </mat-form-field>
          </div>
        </div>
      </div>

0 个答案:

没有答案