Angular4中选中值无法绑定到Angular Material表格的求助

Hey there! Let's fix that issue where your selected state and city aren't showing up in the Angular Material table. Looking at your code, there are a few small tweaks we need to make to get the data binding working correctly.

1. Fix the mat-option binding conflict #

In your component.html, you've added an extra [(ngModel)] on the mat-option element, which clashes with the parent mat-select's ngModel. The mat-select already handles storing the selected state object, so remove that redundant binding from the mat-option:

Original problematic code:

<mat-option *ngFor="let state of stateRows" [value]="state" [(ngModel)]='statName' name="state" #stateName>{{state.stateName}}</mat-option>

Fixed code:

<mat-option *ngFor="let state of stateRows" [value]="state">{{state.stateName}}</mat-option>

2. Link the city input to your formControl #

Your city input uses formControl.invalid in the error message, but you haven't connected the input to the actual formControl in your component. Add the binding to the input element:

Fixed input code:

<input matInput #inputstate class="form-control" [(ngModel)]='citName' #cityName placeholder="City Name" name="cityName" required [formControl]="formControl">

3. Update the saveCity method to use correct data & update the table #

Right now you're referencing this.statName which isn't being set properly. Instead, use the selectedState object from your mat-select to get the state name. Most importantly, we need to add the new city entry to your cityObj array so the table has data to display:

Updated component.ts saveCity method:

saveCity(): void {
  // Validate we have a selected state and city
  if (this.selectedState && this.citName) {
    const newCityEntry = {
      stateName: this.selectedState.stateName,
      cityName: this.citName
    };
    
    // Add the entry to your table's data array (triggers table update)
    this.cityObj.push(newCityEntry);
    
    // Send data to your backend service
    const d = JSON.stringify(newCityEntry);
    this.stateservice.addNewCity(d).subscribe(res => {
      console.log('City saved successfully!', res);
      // Optional: Clear inputs after save
      this.selectedState = null;
      this.citName = '';
    });
  }
}

4. Ensure your table binds to cityObj #

Double-check your table code is iterating over the cityObj array. Here's a sample table setup that works with your data structure:

<table mat-table [dataSource]="cityObj" class="mat-elevation-z8">
  <!-- State Name Column -->
  <ng-container matColumnDef="stateName">
    <th mat-header-cell *matHeaderCellDef> State </th>
    <td mat-cell *matCellDef="let element"> {{element.stateName}} </td>
  </ng-container>

  <!-- City Name Column -->
  <ng-container matColumnDef="cityName">
    <th mat-header-cell *matHeaderCellDef> City </th>
    <td mat-cell *matCellDef="let element"> {{element.cityName}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="['stateName', 'cityName']"></tr>
  <tr mat-row *matRowDef="let row; columns: ['stateName', 'cityName'];"></tr>
</table>

Quick Recap of Key Fixes #

• Let the parent mat-select handle the selected state via [(ngModel)]="selectedState" instead of adding extra bindings to mat-option
• Update your table's data source array (cityObj) when saving new entries to trigger the view update
• Use the full selectedState object to access the state name instead of relying on an unbound variable

After these changes, when you select a state, enter a city name, and click Save, the new entry should appear in your table immediately and be sent to your backend service.

内容的提问来源于stack exchange，提问作者chethu