html - 是否可以使用 For 循环订阅动态填充 Angular 2 材质选项卡?
问题描述
我需要使用 For 循环在 Angular 2 站点上填充动态数量的选项卡,该循环使用订阅从数据库服务获取数据,我想知道这是否可能。
我的数据集按类细分:A、B 和 C,它们每个都有一个子类 1 和 2。所以我想让我的结果动态创建 3 个选项卡(选项卡 A、选项卡 B 和选项卡 C) . 到目前为止,我有这个工作。
然后我需要这些选项卡中的每一个来显示它们的子类的数据。到目前为止,循环运行了 3 次并提供了所需的数据,但每一页都只显示 C 类的数据,因为它是最后一个运行的,并且模型会使用其所有数据进行更新。
以下是我到目前为止所拥有的。
classdata.component.html
<mat-tab-group>
<mat-tab *ngFor="let classresult of classresults;" label="Class -{{classresult.Class_Name}}">
<table class ="responstable">
<thead>
<tr>
<th>Sub-Class Name</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let subclassresult of subclassresults;">
<td>{{subclassresult.Sub_Class_Name}} </td>
<td>{{subclassresult.Value}} </td>
</tr>
</tbody>
</table>
</mat-tab>
</mat-tab-group>
类数据.component.ts
// Populate Class Level Data
this.databaseService.getClass()
.subscribe(classresults => this.classresults = classresults,
error => console.log('ERROR!'),
// Populate Sub-Class Level Data
() => { for (const classresult of this.classresults) {
this.selectedClassId = classresult.Class_ID;
console.log(this.selectedClassId);
this.databaseService.getSubClass(this.selectedClassId)
.subscribe(subclassresults => this.subclassresults = subclassresults);
}
}
);
数据库.service.ts
getClass(): Observable<ClassResult[]> {
const url = 'http://localhost:3000/c';
const data = ({
});
return this._http.post(url, data)
.pipe(
map((res) => {
console.log(res);
return <ClassResult[]> res;
})
);
}
getSubClass(Class_ID): Observable<SubClassResult[]> {
const url = 'http://localhost:3000/sc';
const data = ({
classid: Class_ID
});
return this._http.post(url, data)
.pipe(
map((res) => {
console.log(res);
return <SubClassResult[]> res;
})
);
}
解决方案
您正在为每个 parentClass 获取每个子类,但您正在将每个结果重新分配给类变量this.subclassresults
。基本上,您正在用当前结果覆盖每个先前的结果。这就是为什么每页只显示 C 类数据的原因。
有许多不同的解决方案可以解决这个问题。
解决方案可能是您正在使用forkJoin
Observable 并将父类的结果及其子类保存在自己的对象中:
this.databaseService.getClass().pipe(
switchMap(classResults => {
const subClassRequests = classResults.map(
classResult => this.dabaseService
.getSubClass(classResult)
.pipe(map(subClassResults => {classResult, subClassResults}))
)
return forkJoin(subClassRequests)
})
).subscribe(results => this.results = results);
results
将您的数据保存为数组。
并在您的模板中像这样使用它:
<mat-tab-group>
<mat-tab *ngFor="let result of results;" label="Class -{{result.classresult.Class_Name}}">
<table class ="responstable">
<thead>
<tr>
<th>Sub-Class Name</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let subclassresult of result.subclassresults;">
<td>{{subclassresult.Sub_Class_Name}} </td>
<td>{{subclassresult.Value}} </td>
</tr>
</tbody>
</table>
</mat-tab>
</mat-tab-group>
我实现了一个小的工作演示: StackBlitz Demo
推荐阅读
- azure - 如何为 DCU 百分比指标警报选择正确的阈值?
- javascript - 使用 Laravel 清除缓存
- python - python中负索引的意义是什么?
- javascript - 更改 react mateial-ui Select MuiList 的 backgroundColor
- python - 在python中查找具有lookthru路径和其他列的孩子的所有父母
- node.js - 在电子构建中找不到应用程序入口文件“./main.js”
- date - 为什么我的公式返回的是数字而不是日期?
- python - 我无法从列表中删除元素
- actions-on-google - 动作使麦克风保持打开状态
- pine-script - 警报,真或假,从真到假,从假到真