[英]How to match the observable to an array in angular
Here's the code:这是代码:
//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]],
});
The data of this.server$
observable: 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"
}]
For example It click the data to update.例如它单击要更新的数据。 Then the value of
data.server
然后是
data.server
的值
server :[{
id: 1foD7MVZRwYzr,
code: S4,
name: Server4
},{
id: HIEkQKjpM54V,
code: S3,
name: Server3
}]
What I want here is.我想要的是这里。
When it click the item where it has two server or 1.当它单击具有两个服务器或 1 个的项目时。
It should find it in the observable.它应该在 observable 中找到它。
And it will display in the nz-select multiple
并且会在
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>
It should display on the nz-select
Server4 and Server3它应该显示在
nz-select
Server4 和 Server3 上
const server = this.server$.value.filter(param => data.server.find(x => x.id === param.id));
I tried this it work, but it doesn't display on the nz-select
我试过这个它有效,但它没有显示在
nz-select
You need to declare a variable which stores a response:您需要声明一个存储响应的变量:
TypeScript:打字稿:
fooData;
this.server$.subscribe(param => {
console.log(param);
this.fooData = param.find(x => x === data.server);
console.log(this.fooData);
});
HTML: 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>
Or if you want to use async
pipe, then you do need to call subscribe
method as async
pipe does it:或者,如果您想使用
async
管道,那么您确实需要像async
管道一样调用subscribe
方法:
server$
ngOnInit() {
this.server$ = this.someApMethod.getAll();
}
HTML: 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.