Angular 6、如何在循环时更新angular输入域？

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

你需要在mat-form

里面使用ngFor

 <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

您的实施存在多个问题：

将以下模块添加到 AppModule

的 imports 数组中

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 括在引号中：

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

最后，将此添加到您的 styles.css:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

这里有一个 Working Sample StackBlitz 供您参考。

PS: 为了这个答案，我从 @angular/material 导入与 Angular Material 相关的所有内容。理想情况下，每个模块都应该从更深的路径导入。例如：

import { MatInputModule } from '@angular/material/input';

Answer 4

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

<mat-form-field> 是文本样式的包装组件。这是 ngFor 循环数组 ngFor

的示例

Angular 6、如何在循环时更新angular输入域？

Angular 6, how to update angular input field while looping?

angular

angular-material

angular6

angular-forms