Angular 6，循环时如何更新角度输入场？

Question

我正在尝试在HTML页面内生成mat-form-field的动态数字。

我的组件文件中包含以下数据：

data = [{
    'name': 'XYZ',
    'id': 1,
    'accNo': 123
  },
  {
    'name': 'ABC',
    'id': 2,
    'accNo': 456
  },
  {
    'name': 'PQR',
    'id': 3,
    'accNo': 567
  }
  ]

在html中，我如下循环：

<div class="flex-container">
    <div class="deposit-box" *ngFor="let c of data">
        <div>
            <mat-form-field appearance="outline">
                <mat-label>Name:</mat-label>
                <input matInput placeholder="Placeholder" 
        [(ngModel)]=c.name>
      </mat-form-field>
    </div>
  </div>
</div>

但是我在更新input标记中的值时遇到问题。只有第一个 mat-form-field正在获得价值。

Stackblitz：https://stackblitz.com/edit/angular-7a7add

请帮助我。

当前我得到的输出为：

Answer 1

您需要在ngFor内使用mat-form

 <mat-form-field appearance="outline">
    <div *ngFor="let c of data">  
        <mat-label>Name:</mat-label>
        <input placeholder="Placeholder" [(ngModel)]=c.name>
    </div>
  </mat-form-field>

Demo

Answer 2

似乎您在模块中缺少两个导入，您可以通过检查控制台轻松完成此操作，

将导入更改为

import {MatCardModule, MatFormFieldModule, MatIcon,MatInputModule} from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

我添加了MatInputModule和BrowserAnimationsModule，现在可以正常使用了。

Demo

Answer 3

您的实施存在多个问题：

将以下模块添加到imports的{​​{1}}数组中

AppModule

您缺少import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { MatCardModule, MatFormFieldModule, MatIcon, MatInputModule } from '@angular/material'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { AppComponent } from './app.component'; import { HelloComponent } from './hello.component'; @NgModule({ imports: [BrowserModule, FormsModule, MatCardModule, MatFormFieldModule, MatInputModule, BrowserAnimationsModule ], declarations: [AppComponent, HelloComponent], bootstrap: [AppComponent] }) export class AppModule {} 和MatInputModule。

还要在您的BrowserAnimationsModule标记中添加名称属性，并将input用引号引起来：

c.name

最后，将其添加到您的styles.css：

<input 
  matInput 
  placeholder="Placeholder" 
  [(ngModel)]="c.name"
  name="name">

---

这是您推荐的Working Sample StackBlitz。

---

PS：为了得到这个答案，我从@import "~@angular/material/prebuilt-themes/indigo-pink.css"; 导入了与Angular Material相关的所有内容。理想情况下，应从更深的路径导入每个模块。例如：

@angular/material

Answer 4

使用ngfor代替<mat-form-field>

<mat-form-field>是用于文本样式设置的包装器组件。这是ngFor遍历数组ngFor的示例