Question

我有一个非常简单的mat-form-field，而且它很有趣。当我输入一个值时，它会在我输入的每个字母后取消选择：

<div *ngFor="let phone of user.phones; let i = index">
  <mat-form-field>
    <input matInput
           matTooltip="Enter a phone number"
           [(ngModel)]="user.phones[i]"
           name="phone{{i}}"
           placeholder="Primary phone">
  </mat-form-field>
</div>

当我删除[(ngModel)]="user.phones[i]"时，它工作正常，但它没有做我需要它做的事情。 user.phones[]只是一个字符串数组。我错过了一些明显的东西吗？

export interface User {
  name: string;
  phones: string[];
}

的console.log（）

name: "John",
phones:Array(3)
  0:"4-43235"
  1:"654-65498"
  2:"fs48j3w"
  length:3
  __proto__:Array(0)

Answer 1

例如，您必须将trackBy与索引一起使用。原因是您要绑定到数组中的基元。即string;

您可以使用以下内容：

<强> TEMPLATE

<div *ngFor="let phone of user.phones; let i = index; trackBy: trackByIndex">
  <mat-form-field>
    <input matInput matTooltip="Enter a phone number" [(ngModel)]="user.phones[i]" name="phone{{i}}" placeholder="Primary phone">
  </mat-form-field>
</div>

<强> COMPONENT

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 5';
  user = {
    phones: [
      "4-43235",
      "654-65498",
      "654-123123"
    ]
  }

  trackByIndex(index: number, value: number) {
    return index;
  }
}

我已经使用工作代码进行了演示。希望这可以帮助： APP：https://angular-npqqa7.stackblitz.io 代码：https://stackblitz.com/edit/angular-npqqa7

角度材料形式输入表演奇怪

1 个答案: