带有材质的 Angular 6，单击事件无法正常工作

Question

我正在开发一个简单的基于 Angular6 的表单，并希望创建一个类似于我在 AWS 使用的输入字段。

这是我拥有的代码的狙击手：

 <mat-form-field class="full-width">
     <input matInput [(ngModel)]="enteredText" type="text" (keyup.enter)="addToArray()" name="text">
 </mat-form-field>

之后是我已经添加的文本数组：

<ul>
    <li *ngFor="let text of textArray; let i = index">
        <span> {{ text }} </span>
        <button mat-icon-button (click)="deleteTextFromArray(i)"><mat-icon>clear</mat-icon></button>
    </li>
</ul>

我也有一个enteredText模型textArray。

这是addToArray()功能：

addToArray() {
    this.textArray.push(this.enteredText);
    this.enteredText= '';
}

这是deleteTextFromArray函数：

deleteTextFromArray(index) {
  this.textArray.splice(index, 1);
}

我遇到的问题是我无法在数组中插入 1 个以上的元素。出于某种原因，在第一个元素之后，每次插入都会触发我的删除功能。谢谢你的帮助。

Answer 1

尝试添加type="button"到按钮清除。如果按钮上没有类型，Angular 似乎将其视为提交按钮并尝试提交表单，从而执行链接到按钮的功能。