在Angular 5中动态添加文本框和文本/芯片

我想添加文本框（最大10）动态关闭（X）按钮，然后想添加一些文本到它。单击“保存”按钮后，文本应显示在不同的视图中。如果单击关闭按钮（X），添加的文本框或文本应可删除

视图可以通过“编辑\关闭”按钮进行切换

---

app.component.ts

  fieldArray: Array<any> = [];
  newAttribute: any = {};

  firstField = true;
  firstFieldName = 'First Item name';
  isEditItems: boolean;

  addFieldValue(index) {
    if (this.fieldArray.length <= 2) {
      this.fieldArray.push(this.newAttribute);
      this.newAttribute = {};
    } else {

    }
  }

  deleteFieldValue(index) {
    this.fieldArray.splice(index, 1);
  }

  onEditCloseItems() {
    this.isEditItems = !this.isEditItems;
  }

fieldArray:Array

已编辑
这是Angular的《英雄之旅》中描述的第一个项目之一，甚至有这样的示例代码。这有点不同，我想先添加文本框，然后再添加文本。Angular的《英雄之旅》只有一个文本框可以添加芯片。继续更新您的问题，以显示您尝试的相关代码，以及这与您想要实现的目标之间的差异。根据您的问题，它确实完全匹配，因此为了向您提供帮助，您需要进行这些更改（或者可能会因为内容太广泛而自动关闭）。谢谢，@Z.Bagley为您提供时间和评论。谢谢，非常有用的示例
    <div class="container">
    <br>
    <div class="row">
        <table class="table table-striped table-bordered col-lg-4">
      <caption><i>Add/remove textbox and chip dynamically in Angular 6</i></caption>
            <thead>
                <tr>
                    <th>Item Name
                        <a (click)="onEditCloseItems()" class="text-info float-right">
                            <i class="mdi mdi-{{isEditItems ? 'close' : 'pencil'}} mdi-18px"></i>
                        </a>
                    </th>
                </tr>
            </thead>

            <tbody *ngIf="!isEditItems">
                <tr *ngIf="firstField">
                    <td>
                        <i (click)="firstField = false" class="mdi mdi-close mdi-18px"></i> {{firstFieldName}}
                    </td>
                </tr>
                <tr *ngFor="let field of fieldArray; let i = index">
                    <td *ngIf="field?.name">
                        <i (click)="deleteFieldValue(i)" class="mdi mdi-close mdi-18px"></i> {{field.name}}</td>
                </tr>
            </tbody>

            <tbody *ngIf="isEditItems">
                <tr>
                    <td *ngIf="firstField">
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <div (click)="firstField = false" class="input-group-text"><i class="mdi mdi-close mdi-18px"></i></div>
                            </div>
                            <input [(ngModel)]="firstFieldName" class="form-control py-2 " type="text" name="firstFieldName" placeholder="Item Name">
                        </div>
                    </td>
                </tr>

                <tr *ngFor="let field of fieldArray; let i = index">
                    <td>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <div (click)="deleteFieldValue(i)" class="input-group-text"><i class="mdi mdi-close mdi-18px"></i></div>
                            </div>
                            <input [(ngModel)]="field.name" class="form-control" type="text" name="{{field.name}}" placeholder="Item Name">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        <button *ngIf="fieldArray.length <= 2" class="btn btn-success btn-sm" type="button" (click)="addFieldValue()" style="margin-right:10px">Add More Item</button>
                        <button (click)="onEditCloseItems()" class="btn btn-primary btn-sm" type="button">Save Items</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>