how to post selected option value to angular material table using angular4

Question

Hi Here i want to post the selected value into angular material table but even i select value it is showing empty as shown in fig. When i selected state and enter city name those values should be present inside table but the selected values is not binding into the table please help me Thanks in advance

Component.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>

component.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 => { });  
 }

Answer 1

Even if you are posting the data right in this.stateservice.addNewCity(d) method, but are you again getting the data back from service, because you are getting the data in ngOnInit() method and after posting the data you are not populating the table data again in given code.

saveCity() method can be like this -

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;
  });
}

If this doesn't work then may be some problem is there with service methods.