I recently started using Angular and I'm facing a challenge in displaying multiple tables based on a list of values. Each rule refNo should have its own separate rule conditions table displayed sequentially. Currently, all the tables are showing the same values.
RuleComponent.html
<div *ngFor="let x of automation_rules_list">
<table class="table">
<thead>
<tr>
<th>Ticket Field</th>
<th>Operator</th>
<th>Expected Value</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let o of automation_rules_conditions_list">
<td>{{o.ticketField}}</td>
<td>{{o.ticketField}}</td>
<td>{{o.operator}}</td>
<td>{{o.expectedValue}}</td>
<td><span class="pointer text-danger"><i class="fas fa-trash-alt"></i></span></td>
</tr>
</tbody>
</table>
RuleComponent.ts
ngOnInit() {
this.loadAutomationRules();
}
loadAutomationRules() {
this.ars.getAutomationRules().subscribe(res => {
this.automation_rules_list = res;
for (var i = 0; i < this.automation_rules_list.length; i++) {
this.loadAutomationRuleConditions(res[i]["refNo"]);
}
});
}
loadAutomationRuleConditions(ruleRefNo) {
this.ars.getAutomationConditions(ruleRefNo).subscribe(res => {
this.automation_rules_conditions_list = res;
});
}