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，单击事件无法正常工作

1 个答案: