Question

我是Angular的新手，它试图基于值列表显示多个表。对于每个规则refNo，必须有一个单独的规则条件表，一个接一个显示。目前，所有表格都显示相同的值。

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;


  });


}

Answer 1

您应该在每个automation_rules_condition中添加automation_rule属性。 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]);

    }


  });

}

loadAutomationRuleConditions(rule) {

  this.ars.getAutomationConditions(rule["refNo"]).subscribe(res => {

    rule.automation_rules_condition = res;


  });

}

您应该使用x.automation_rules_condition来显示表格。

<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 x.automation_rules_condition">
          <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>
</div>

Answer 2

您必须将新数据添加到automation_rules_conditions_list而不是覆盖

如果我的答案是您想要的，我对Rxjs有一些建议

RuleComponent.ts

ngOnInit() {

  this.loadAutomationRules();
}


loadAutomationRules() {

  this.ars.getAutomationRules().subscribe(res => {

    this.automation_rules_list = res;

   // reset automation_rules_conditions_list
   this.automation_rules_conditions_list = [];

    for (var i = 0; i < this.automation_rules_list.length; i++) {

      this.loadAutomationRuleConditions(res[i]["refNo"]);

    }


  });

}

loadAutomationRuleConditions(ruleRefNo) {

  this.ars.getAutomationConditions(ruleRefNo).subscribe(res => {

    // add the new data to automation_rules_conditions_list
    this.automation_rules_conditions_list.push(res);


  });


}

Angular-基于列表显示表列表

2 个答案: