使用 forkJoin() 组合这两个 ws 请求

Question

我在这段代码中的问题是：当我在过滤器中使用时，城市显示为空，在 html 显示城市 ID 中，我想显示城市名称。

请问如何使用 forkJoin()

合并这两个 ws 请求

 export class Component1 implements OnInit {

      client: Client;
      myform: FormGroup;
      cities: City[] = [];

      filteredOptionsCity: any;
      city_id: FormControl = new FormControl();

      selectedCity: string;

      constructor(private fb: FormBuilder,
        private router: Router,
        private clientService: ClientService,
        private activatedRoute: ActivatedRoute,
        private cityService: CityService
      ) {

        this.myform= this.fb.group({
          'client_name': new FormControl('', [Validators.required, Validators.nullValidator]),
          'city_id': new FormControl('', Validators.required),
          'email': new FormControl('', Validators.required)
        });
      }

      ngOnInit() {

        this.populateForm();

        this.selectedCity = this.cities.filter(
          cityx => cityx.city_id === this.client.city
            .map(cityx => cityx.city_id)[0])
          .map(cityy => cityy.name).join('');

        console.log(this.cities) ///empty

        console.log(this.cities.filter(
          cityx => cityx.city_id === this.client.city
            .map(cityx => cityx.city_id)[0]).map(cityy => cityy.city_id).join(''))  //empty


        this.filteredOptionsCity = this.city_id.valueChanges.pipe(
          startWith(''),
          map(value => this.filterCity(value))
        );


        this.cityService.getAllCity().subscribe(
          cities => {
            this.cities = cities
            console.log(cities) //all cities
          }
        );

      }

      populateForm() {
        this.activatedRoute.params.subscribe(
          params => {
            this.clientService.getClientById(params['id']).subscribe(
              client => {
                this.client = client;
                this.patchForm();
              }
            );
          }
        );
      }

      patchForm() {
        this.myform.controls['client_name'].setValue(this.client.clientName);
        this.myform.controls['city_id'].setValue(this.client.city_id);
        this.myform.controls['email'].setValue(this.client.email);
      }


      filterCity(val: string): City[] {
        if (val) {
          let filterValue = val.toString();
          return this.cities.filter(city => city.name.toString().startsWith(filterValue));
        }
        return this.cities;
      }

    }

在 html 中，对于城市我使用了自动完成 material，我的代码只显示城市 ID。我的 class:

export class Client {
  client_name: string;
  email: string;
  city: City[];
}

export class City {
  city_id: string;
  name: string;
}

我想在自动完成中显示城市名称。 html代码：

<form [formGroup]="myform">
    <input formControlName="client_name"  placeholder="name">
    <input formControlName="email"  placeholder="email" >
    <input formControlName="city_id" placeholder="City" [(ngModel)] = "selectedCity" aria-label="State" [matAutocomplete]="auto" Input [formControl]="city_id">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let item of filteredOptionsCity | async" [value]="item.name">
        <span>{{ item.name }}</span> 
      </mat-option>
    </mat-autocomplete> 
  </form>

我的 json 文件：

{"StatusCode":0,"StatusMessage":"OK","StatusDescription":
   [ 
     {
       "client_id":"1",
       "client_name":"test",
       "email":"test@gmail.com",
       "registrationdate":"2018-04-06T08:19:03.000Z",
       "city_id":4
     }
   ]
 }

城市：

{
    "StatusCode": 0,
    "StatusMessage": "OK",
    "StatusDescription": [
      {
      name: 'Arkansas',
      city_id: '1'
    },
    {
      name: 'California',
      city_id: '2'
    },
    {
      name: 'Florida',
      city_id: '3'
    },
    {
      name: 'Texas',
      city_id: '4'
    },
    {..}
  ]
 }

更新

this.cityService.getAllCity().subscribe(
          cities => {
            this.cities = cities
            let city = this.cities.find(city => city.city_id === this.client.city_id);
            if (city) {
           this.selectedCity = city.name
           }
           }
           );

Answer 1

更新 1：

如果我对结构的理解正确，那么应该这样做

let clientCities = this.client.city.map(city => city.city_id);
let selectedCity = this.cities.filter(city => clientCities.includes(city.city_id)).map(item => item.name);
// selectedCity will have strings of names you can join array of strings

试试这个：

let city = this.cities.find(city => city.city_id == this.client.city_id);
if(city) {
    this.selectedCity = city.name;
}

使用 forkJoin() 组合这两个 ws 请求

combine those two ws requests using forkJoin()

autocomplete

fork-join

typescript

angular-material

angular