title: Angular - Display table list based on a list
body: <p>I'm new to Angular and trying to display multiple tables based on a list of values. For each rule refNo there has to be a separate rule conditions table displayed one after the other. At the moment all the tables are displaying the same values. </p>
  
  <p><strong>RuleComponent.html</strong></p>
  
  <pre><code>  &lt;div  *ngFor="let x of automation_rules_list"&gt;
  
      &lt;table class="table"&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th&gt;Ticket Field&lt;/th&gt;
            &lt;th&gt;Operator&lt;/th&gt;
            &lt;th&gt;Expected Value&lt;/th&gt;
            &lt;th&gt;Action&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          &lt;tr  *ngFor="let o of automation_rules_conditions_list"&gt;
            &lt;td&gt;{{o.ticketField}}&lt;/td&gt;
            &lt;td&gt;{{o.ticketField}}&lt;/td&gt;
            &lt;td&gt;{{o.operator}}&lt;/td&gt;
            &lt;td&gt;{{o.expectedValue}}&lt;/td&gt;
            &lt;td&gt;&lt;span class="pointer text-danger"&gt;&lt;i class="fas fa-trash-alt"&gt;&lt;/i&gt;&lt;/span&gt;&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
  
      &lt;/table&gt;
  </code></pre>
  
  <p><strong>RuleComponent.ts</strong></p>
  
  <pre><code>ngOnInit() {
  
    this.loadAutomationRules();
  }
  
  
  loadAutomationRules() {
  
    this.ars.getAutomationRules().subscribe(res =&gt; {
  
      this.automation_rules_list = res;
  
      for (var i = 0; i &lt; this.automation_rules_list.length; i++) {
  
        this.loadAutomationRuleConditions(res[i]["refNo"]);
  
      }
  
  
    });
  
  }
  
  loadAutomationRuleConditions(ruleRefNo) {
  
    this.ars.getAutomationConditions(ruleRefNo).subscribe(res =&gt; {
  
      this.automation_rules_conditions_list = res;
  
  
    });
  
  
  }
  </code></pre>