1

嗨，我想将选定的值发布到角度材料表中，但即使我选择了值，它也显示为空，如图所示。当我选择州并输入城市名称时，这些值应该出现在表中，但所选值未绑定到表中请帮助我提前谢谢

图片1

图片2

组件.html

      <div class="form">        
    <mat-form-field>
      <mat-select placeholder="--Select State--" [(ngModel)]="selectedState" name="state">
        <mat-option>None</mat-option>
        <mat-option *ngFor="let state of stateRows" [value]="state" [(ngModel)]='statName' name="state"  #stateName>{{state.stateName}}</mat-option>
      </mat-select>
    </mat-form-field>  
  </div><br><br>

  <div class="form">
    <mat-form-field color="accent">
      <input matInput #inputstate class="form-control" [(ngModel)]='citName' #cityName placeholder="City Name" name="cityName" required >
      <mat-error *ngIf="formControl.invalid">{{getErrorMessage()}}</mat-error>              
    </mat-form-field>
  </div><br><br> 

</form>
    <div mat-dialog-actions  align="end">
        <button mat-raised-button [type]="submit" color="accent" [mat-dialog-close]="1" (click)="saveCity()">Save</button>
        <button mat-raised-button color="primary" (click)="onNoClick()" tabindex="-1">Cancel</button>
    </div>

组件.ts

export class AddCityDialogComponent {

formControl = new FormControl('', [
Validators.required
// Validators.email,
 ]);

 public cityObj: any = [{ stateName: '', cityName: '' }];
 stateName: string[];
 cityName: string;
 citName: string;
 statName:string;
 selectedDay: string = '';

selectChangeHandler (event: any) {
//update the ui
this.selectedDay = event.target.value;
 }

 states: any[];
 city: string[];
// stateName: string[];
 selected = null; 
 stateRows:any[];

 constructor(public dialogRef: MatDialogRef<AddCityDialogComponent>,
          @Inject(MAT_DIALOG_DATA)
          private http: HttpClient, private stateservice:StateService) {   }

ngOnInit(){
  this.stateservice.getCityTableData()
  .subscribe(states =>{
      this.stateRows=states;
      console.log(states);
    });
   }

 saveCity(stateName: string, cityName: string): void {
  const data = { 'stateName': this.statName, 'cityName': this.citName };
 const d = JSON.stringify(data);        
 this.stateservice.addNewCity(d).subscribe(res => { });  
 }
4

1 回答 1

0

即使您在this.stateservice.addNewCity(d)方法中正确发布数据，但您是否再次从服务中获取数据，因为您正在获取ngOnInit()方法中的数据并且在发布数据之后您不会再次在给定代码中填充表数据。

saveCity()方法可以是这样的——

saveCity(stateName: string, cityName: string): void {
  const data = { 'stateName': this.statName, 'cityName': this.citName };
  const d = JSON.stringify(data);        
  this.stateservice.addNewCity(d).subscribe(res => { });  

  this.stateservice.getCityTableData()
  .subscribe(states =>{
     this.stateRows = states;
  });
}

如果这不起作用，那么服务方法可能存在一些问题。

于 2018-05-24T08:55:29.497 回答