角度6：

显示列表

<ng-container *ngFor="let list of lists">
    <div class=card>
      <h2>{{list.name}}</h2>
      <ul>
        <li *ngFor="let item of list.items">{{item}}</li>
      </ul>
      ///.... add an item to list (code below see all options)....
    </div>

添加项目到列表：选项1

<input type="text" #addItemTitle>
<button [disabled]="!( addItemTitle.value.length > 4)" 
(click)="addItem( addItemTitle.value )">Add Item</button>

详细信息（选项1）：在过去3个月内完成此操作并且完美无缺 . 现在我想添加验证 . 仅在输入框外部单击时才会更新值 .

添加项目到列表：选项2

<input type="text" [(ngModel)]="addItemTitle">
<button [disabled]="!(addItemTitle?.length > 4)" 
(click)="addItem( addItemTitle )">Add Item</button>

详细信息（选项2）：这里的问题是所有ngModel都表现为一个，所以更新更新所有其他（bcz . ngModel是相同的），同样适用于FormControlDirective

添加项目到列表：选项3（当前使用）

<input type="text" [(ngModel)]="addItems[i]">
<button [disabled]="!((addItems[i])?.length > 4)" 
(click)="addItem( addItems[i] )">Add Item</button>

细节（选项3）：这是我目前使用的，我在component.ts中声明了addItems = []，它可以工作 .

My Concerns:

  • 稳定性：选项3是否良好......还有其他建议 .

  • 可扩展：我也必须编辑/删除项目，因此在ngfor中嵌套ngfor，因此addItems = []将不起作用，我可能必须声明addItems = [[]]，addItems [i] [j]

  • 因为，我的主要目标是验证 . FormControlDirective提供了很好的验证控制，但addItems = [a，b，c]，其中a，b，c是新的FormControl，但我不知道数字......

编辑：

我找到了一个更好的解决方案：使用组件，创建一个名为InputHandlerCmp的额外组件，使用@Input和更改将数据传递给它 . 这种方式分离每个ngModel或FormControlDirective（更好的验证）

angular