Javascript 如何在角度上将可观测值与阵列匹配
代码如下:Javascript 如何在角度上将可观测值与阵列匹配,javascript,angular,typescript,Javascript,Angular,Typescript,代码如下: //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:
//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]],
});
此.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选择多个
<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
上。您需要声明一个存储响应的变量:
打字稿:
fooData;
this.server$.subscribe(param => {
console.log(param);
this.fooData = param.find(x => x === data.server);
console.log(this.fooData);
});
HTML:
HTML:
您需要声明一个存储响应的变量:
打字稿:
fooData;
this.server$.subscribe(param => {
console.log(param);
this.fooData = param.find(x => x === data.server);
console.log(this.fooData);
});
HTML:
HTML:
您应该阅读订阅服务器的文档,并尝试使用此const server=this.server$.value.filter(param=>data.server.find(x=>x.id==param.id))代码>但它不会显示在nz select
上,您认为const的范围是什么?这样的声明永远不会出现在binding@Panda数据['server']
意味着什么?我没有看到数据变量?@KurtHamilton数据['server']server=[{id:1foD7MVZRwYzr,code:S4,name:Server4},{id:HIEkQKjpM54V,code:S3,name:Server3}]
您应该阅读订阅的文档,然后尝试使用此const server=this.server$.value.filter(param=>data.server.find(x=>x.id==param.id))代码>但它不会显示在nz select
上,您认为const的范围是什么?这样的声明永远不会出现在binding@Panda数据['server']
意味着什么?我没有看到数据变量?@KurtHamilton数据['server']<代码>服务器=[{id:1foD7MVZRwYzr,代码:S4,名称:Server4},{id:HIEkQKjpM54V,代码:S3,名称:Server3}]
<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>
server$
ngOnInit() {
this.server$ = this.someApMethod.getAll();
}
<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>