Angular 6, как обновить поле углового ввода при зацикливании?

Question

Я пытаюсь сгенерировать динамическое число mat-form-field внутри html-страницы.

У меня есть следующие данные в файле компонента:

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-field>

<mat-form-field> - компонент-оболочка для оформления текста.Вот пример ngFor для цикла по массиву ngFor

Answer 2

Кажется, что вам не хватает двух импортов в модуле, вы могли бы легко это сделать, проверив консоль,

Измените ваш импорт на

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

Я добавил MatInputModule и BrowserAnimationsModule и теперь работает как положено.

Демо

Answer 3

Существует несколько проблем с вашей реализацией:

Добавьте следующие модули в массив imports вашего 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 в кавычки:

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

Наконец, добавьте это в файл styles.css:

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

---

Вот Рабочий образец StackBlitz для вашей ссылки.

---

PS: Радииз этого ответа я импортирую все, что связано с угловым материалом из @angular/material.В идеале каждый модуль должен быть импортирован из более глубокого пути.Например:

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

Answer 4

Вам нужно использовать 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>

Демо