ngModel 使用 Angular8 时未显示加载的数据

Question

Initially when I used {{item.name}} to load the value it worked perfectly, but after I added ngModel it stopped working properly. Now no value is showing and whenever I enter anything in one text box the other text boxes also get filled with the same value

please help me to solve this,

HTML Code

<tr *ngFor="let item of this.familyInfo">
  <td><input type="text" class="form-control" value="{{item.name | titlecase}}" [(ngModel)]="this.cr.name"></td>
  <td><input type="text" class="form-control" value="{{item.age}}" [(ngModel)]="this.cr.age"></td>
  <td><input type="text" class="form-control" value="{{item.relation | titlecase}}" [(ngModel)]="this.cr.relation"></td>
  <td><button class="style_blue_button_square" style="width: 100%;" id={{item.id}}
      (click)="updateFamilyInfo($event)">Udate</button></td>
</tr>

Answer 1

you need to add "FormsModule" to your app.module.ts file

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import {FormsModule} from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

I reviewed you the above code, too.

[(ngModel)]="this.cr.name"

at there, this. was wrong. "this." don't need. you need to fix like the following.

[(ngModel)]="cr.name"

Answer 2

When using ngModel, you don't need to bind to value, ngModel does that for you. Perhaps this combination is causing the trouble?

Answer 3

I believe forevereffort has the answer for your but I just wanted to point out some things related to formatting.

1. this. isn't necessary in template s <tr *ngFor="let item of familyInfo"> is okay.
2. there is really a difference between value="{{item.name | titlecase}}" and [value]="item.name | titlecase" (you should use the latter.)
3. try to keep css in the .scss files