Angular 6 с материалом, событие нажатия не работает должным образом - PullRequest
Новая
       20

Angular 6 с материалом, событие нажатия не работает должным образом

0 голосов
/ 03 сентября 2018

Я занимаюсь разработкой простой формы на основе 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 элемента. По какой-то причине после первого элемента каждая вставка запускает мою функцию удаления. Спасибо за помощь.

1 Ответ

0 голосов
/ 03 сентября 2018

Попробуйте добавить type="button" к кнопке очистки. Если на кнопке нет типа, Angular видит ее как кнопку отправки и пытается отправить форму, выполняя функцию, связанную с кнопкой.

...