Как сопоставить наблюдаемое с массивом в angular

Question

Вот код:

//this is the code that I tried it return undefined
this.server$.subscribe(param => {
      console.log(param);
      const sample = param.find(x => x === data.server);
      console.log(sample);
    });

return this.fb.group({
  server: [data && data['server'] || '', [Validators.required, Validators.email]],
});

Данные this.server$ наблюдаемые:

[{
code: "S1"
createdBy: "admin"
id: "1cUMlNRSamZHD"
name: "Server1"
status: "ACTIVE"
timeCreated: "2019-09-13 17:02:33"
timeUpdated: "2019-09-19 14:38:41"
},{
code: "S2"
createdBy: "admin"
id: "w1lPuzJ8iJQp"
name: "Server2"
status: "ACTIVE"
timeCreated: "2019-08-30 15:24:44"
timeUpdated: "2019-12-10 16:54:17"
},{
code: "S3"
createdBy: "admin"
id: "HIEkQKjpM54V"
name: "Server3"
status: "ACTIVE"
timeCreated: "2019-08-05 11:00:59"
timeUpdated: "2019-08-05 11:00:59"
},{
code: "S4"
createdBy: "admin"
id: "1foD7MVZRwYzr"
name: "Server4"
status: "ACTIVE"
timeCreated: "2019-08-30 21:06:23"
timeUpdated: "2019-12-10 16:54:22"
}]

Например, щелкните данные для обновления. Тогда значение data.server

    server :[{
    id: 1foD7MVZRwYzr,
    code: S4,
    name: Server4
    },{
    id: HIEkQKjpM54V,
    code: S3,
    name: Server3
    }]

То, что я хочу здесь:

Когда он щелкает по элементу, где у него есть два сервера, или 1.

Он должен найти это в наблюдаемой.

И он будет отображаться в nz-select multiple

<nz-select formControlName="server" name="server" nzPlaceHolder="Select server(s)" [nzMode]="'multiple'" nzAllowClear>
              <nz-option *ngFor="let server of (server$ | async)" [nzLabel]="server.name" [nzValue]="server"></nz-option>
            </nz-select>

Он должен отображаться на nz-select Server4 и Server3

const server = this.server$.value.filter(param => data.server.find(x => x.id === param.id));

I пробовал это работает, но не отображается на nz-select

Answer 1

Вам необходимо объявить переменную, в которой хранится ответ:

TypeScript:

fooData;

this.server$.subscribe(param => {
  console.log(param);
  this.fooData = param.find(x => x === data.server);
  console.log(this.fooData);
});

HTML:

<nz-select 
    formControlName="server" name="server" 
    nzPlaceHolder="Select server(s)" [nzMode]="'multiple'" nzAllowClear>
    <nz-option 
        *ngFor="let server of fooData" 
        [nzLabel]="server.name" [nzValue]="server">
    </nz-option>
</nz-select>

Или, если вы хотите использовать async pipe, тогда вам нужно вызвать subscribe метод, как async pipe:

server$

ngOnInit() {
    this.server$ = this.someApMethod.getAll();
}

HTML:

<nz-select formControlName="server" name="server" 
    nzPlaceHolder="Select server(s)" [nzMode]="'multiple'" nzAllowClear>
    <nz-option *ngFor="let server of (server$ | async)" [nzLabel]="server.name" 
        [nzValue]="server">
    </nz-option>
</nz-select>