как опубликовать значение выбранного параметра в таблицу угловых материалов с помощью angular4 - PullRequest
Новая
       14

как опубликовать значение выбранного параметра в таблицу угловых материалов с помощью angular4

0 голосов
/ 24 мая 2018

Привет. Здесь я хочу разместить выбранное значение в таблице угловых материалов, но даже при выборе значения оно отображается пустым, как показано на рис.Когда я выбрал штат и ввел название города, эти значения должны присутствовать в таблице, но выбранные значения не являются обязательными в таблице, пожалуйста, помогите мне заранее Спасибо

Image1

Image2

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

1 Ответ

0 голосов
/ 24 мая 2018

Даже если вы публикуете данные прямо в методе 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;
  });
}

Если это не работает, то может быть некоторая проблема с методами обслуживания.

...