如何解决如何从 Angular 9 中嵌套的 json 对象绑定数据? get-count.pipe.tscomponent.module.tscomponent.html
我正在尝试在我的 angular 应用程序中绑定嵌套的 json 对象。这里
component.html 文件
<div class="row">
<ul class=" g-img col-md-3 col-sm-3 col-xs-12" *ngFor="let data of ruleTypeList">
<li *ngFor="let group of data.AnalyticsGroup; let i = index">
<div class="object-box noti-box col s s1 home-box" >
<p>{{data.RuleName}}</p>
<p>{{group.GroupName}}</p>
<div>
<p>Overall Count: {{getCount(group.Id)}}</p>
</div>
</div>
</li>
</ul>
</div>
我得到了重复的 ID,如图所示。因此,我无法获得稳定的总计数。
component.ts 文件
getCount(id){
this.service.postGroupInfo(grpId).subscribe((res: any)=>{
const count = res.Count
return count
})
}
我该怎么做???
解决方法
我喜欢用 pipe 解决这类问题
get-count.pipe.ts
import { Pipe,PipeTransform } from '@angular/core'
import { Service } from 'yourPath'
@Pipe({
name: 'getCount',})
export class getCountPipe implements PipeTransform {
constructor(private _service: Service) {}
transform(grpId: any): Promise<any> {
return new Promise((resolve) => {
if(!grpId) resolve(?) // grpId wasn't given with
this._service.postGroupInfo(grpId).subscribe((response) => {
resolve(response.Count)
},(error) => {
resolve('?') // Something wrong happen
},)
})
}
}
component.module.ts
@NgModule({
declarations: [
//...
getCountPipe,],// ...
})
component.html
<p>Overall Count: {{group.Id | getCount | async}}</p>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。