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

【问题标题】：Add textbox and text/chip dynamically in Angular 5在 Angular 5 中动态添加文本框和文本/芯片
【发布时间】：2018-10-26 17:32:28
【问题描述】：

我想使用关闭 (X) 按钮动态添加文本框（最多 10 个），然后想向其中添加一些文本。单击“保存”按钮后，文本应显示在不同的视图中。如果单击关闭按钮 (X)，添加的文本框或文本应该是可移除的。

可以使用编辑\关闭按钮切换视图。

【问题讨论】：

这是angular.io/tutorial 中描述的第一个项目之一 - Angular 的英雄之旅，甚至还有真正做到这一点的示例代码。
略有不同，我想先添加文本框，然后再添加文本。 Angular 的英雄之旅只有一个文本框来添加筹码。
继续并更新您的问题以显示您尝试过的相关代码，以及该代码与您想要实现的代码之间的区别。就您的问题而言，它确实完全匹配，因此为了向您提供帮助，您需要进行这些更改（或者由于过于宽泛而可能会自动关闭）。
感谢@Z.Bagley 的宝贵时间和cmets。

标签： angular typescript

【解决方案1】：

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;
  }

app.component.html

    <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>

Stackblitz demo link 1

已编辑 Stackblitz demo link 2

【讨论】：

谢谢，非常有用的例子