*ngFor 取决于 2 个匹配值的数组

Question

我在理解如何执行 *ngFor 循环时遇到一些问题，这取决于我在 2 个不同数组中的值，例如：

数组：label_name

数组：total_by_level

我正在执行 ngFor，我希望 ngFor 渲染在这 2 个数组中具有值的行，在这里，我的 ngFor 应该渲染：Network Main：1537.82，Drops Drop Aluminum：21752.15 和 Misc VANNE： 19541 尊重他们的价值观

我尝试过使用 foreach 和 filter，但我在网上找到的解决方案都没有适合我的问题。

如果有人知道我需要去哪里/我需要做什么，我将不胜感激。

先谢谢了

代码示例：

HTML：

<div class="container dpf wid">
  <form [formGroup]="cartForm">
        <div *ngFor="let levels of total_by_level"
             style="display: contents">
          <div *ngFor="let level_names of label_name">
          <a class="flex1 bold pointer" >TOTAL {{level_names}} {{levels[2][3]}}</a>
        </div>
 </form>
</div>

component.ts：

constructor(private formBuilder: FormBuilder,
              private service: QuotationMenuService) { }

  cartForm: FormGroup;
  quotArray: any;
  quotDetails: any;
  cartDetails: any;
  labels: any;
  label_name: any;
  total_by_level: any;
  array: any;

  ngOnInit(){
    this.requiredFields();
    this.service.getStructure().subscribe(res => {
      this.labels = res.parts;
      this.label_name = Array(res.labels_levels);
      console.log(this.label_name);
    });
    this.initQuot();
  }

  ngOnChanges() {
    this.initQuot();
  }

  initQuot(){
    this.service.checkExistQuot().subscribe(res => {
      this.quotArray = res;
      this.quotDetails = res.quotation.quotationdetail;
      this.cartDetails = Array(res.cart);
      console.log(this.quotDetails);
      console.log(this.cartDetails);
      this.total_by_level = Array(res.cart.total_by_level);
      console.log(this.total_by_level);
      console.log(res);
    });
  }

  get f() {
    return this.cartForm.controls;
  }

  requiredFields(){
    this.cartForm = this.formBuilder.group(
      {

      }
    )
  }

这是我页面上的实际样子：

Answer 1

我想说输入数组需要重新格式化。这无疑是解决原本可以避免的问题的解决方案。

也就是说，你可以试试下面的循环

控制器

for (const levelKey in this.total_by_level[0]) {
  if (this.total_by_level[0].hasOwnProperty(levelKey)) {   // <-- add check here to avoid error
    const key = this.label_name[0][levelKey] + ' ' + this.label_name[0][Object.keys(this.total_by_level[0][levelKey])[0]];
    const value = this.total_by_level[0][levelKey][Object.keys(this.total_by_level[0][levelKey])[0]];
    this.output_object[key] = value;
  }
}

output_object = Object.create(null).

并在模板中显示

<div *ngFor="let output of output_object | keyvalue">
  {{ output.key }}: {{ output.value }}
</div>

工作示例：Stackblitz