Angular 6 与 Material，点击事件无法正常工作

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 似乎将其视为提交按钮并尝试提交表单，从而执行链接到按钮的功能。

Angular 6 与 Material，点击事件无法正常工作

Angular 6 with Material, click event not working properly

forms

click

angular-material

angular