类型错误：this._chipList.registerInput 不是函数 - Angular Material

Question

问题陈述

我试图从<input>标签获取输入并将其显示为 GUI 中的芯片，但控制台给出错误："TypeError: this._chipList.registerInput is not a function"。

---

代码

<mat-form-field>
<h3 class="sizeHeading">Add a size</h3>
<input matInput [matChipInputFor]="sizes" (matChipInputTokenEnd)="addSize($event)" <= Crash happens here
[(ngModel)]="data.size" class="sizeInput"><br><br>
</mat-form-field>

.... <!-- More code here but it is not part of the problem and what I am trying to show -->

<!-- Sizes display as chips -->
<div *ngIf="!displayOptions">
<mat-chip-list>
<mat-chip #sizes *ngFor="let size of sizes" [removable]="removable"
(removed)="removeSize(size)">
{{size}}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>
</mat-chip-list>
</div>

---

代码解释

在 HTML 代码的顶部块中，我试图获取用户输入并将其显示为 GUI 中的芯片，这是在 HTML 代码的底部块中完成的。

正如您所看到的，我认为这就是问题所在，但我不确定，[matChipInputFor]="sizes"输入标记中的 in 应该指向#sizes代码底部块中的元素以显示输出输入的位置。事实上，程序崩溃的行是我[matChipInputFor]="sizes"在输入标记中指定的代码行。

---

我尝试过的

• 我用 Google 搜索了一下，似乎这个错误没有出现在结果中或 Stackover Flow 上的任何地方。
• 我尝试将顶部代码块放置在div带有*ngIf条件的标签内，但无济于事。我这样做是因为我认为这可能是元素范围的问题#sizes。

---

实际结果

程序因错误而崩溃，"TypeError: this._chipList.registerInput is not a function"我无法获取输入并将其显示为芯片。

---

预期成绩

我想获取输入并将其显示为 Angular Material 中的芯片。

Answer 1

您的代码有两个问题。

1. #sizes 引用属性与您的 size 数组冲突。例如，您可以将其命名为#sizeList。
2. [matChipInputFor] 引用必须指向芯片列表 (mat-chip-list)，而不是芯片本身。因此，您应该将 #sizeList 移动到 mat-chip-list 元素。

所以它应该看起来像这样：

<mat-form-field>
  <input matInput [matChipInputFor]="sizeList" (matChipInputTokenEnd)="addSize($event)" [(ngModel)]="data.size" class="sizeInput"><br><br>
</mat-form-field>

<div *ngIf="!displayOptions">
  <mat-chip-list #sizeList>
    <mat-chip *ngFor="let size of sizes" [removable]="removable" (removed)="removeSize(size)">
      {{size}}
      <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
    </mat-chip>
  </mat-chip-list>
</div>