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

Posted 2023-03-13

【中文标题】使用 forkJoin() 组合这两个 ws 请求

【英文标题】：combine those two ws requests using forkJoin()

【发布时间】：2018-09-22 08:08:04

【问题描述】：

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

请问，如何

 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 中，对于城市，我使用了自动完成材料，我的代码仅显示城市的 id。我的班级：

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":"[e-mail]",
       "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
           
           
           );

【问题讨论】：

你在filteredOptionsCity中的哪里赋值？

@AnshumanJaiswal filteredOptionsCity 是映射 filterCity 的管道。我张贴。我的问题是：当我编辑此表单时，我需要显示城市名称，而不是 city_id，

【参考方案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;

【讨论】：

您的第一个代码对我来说非常有用，我编辑了我的帖子。只是，我对这段代码有一点问题，我想提交我的 id_city，而不是城市名称。此代码提交城市名称

当然可以！谢谢您的帮助。现在你能建议我，如何提交我的 city_id，没有城市名称？？

在提交之前，您可以根据名称从城市中找到城市，然后发送 id

你能创建一个 stackblitz/plunker，我会检查完整的解决方案，也许我可以提出比当前实施更好的建议。

stackblitz.com/edit/…