How to combine two arrays into one array of objects?-CodePudding

Can I use an ngFor instead of repeating <table> two times? NB: I thought to combine all the items into objects as items of a single array of mapping(each object contains a variable, label and value) but it does not work for me)

....
this.maxValueTable.push(selectedData.res.maxValue);
this.minValueTable.push(selectedData.res.minValue);
...

<div style="display: flex;">
        <table style="width:100%;">
            <thead>
                <tr>
                    <th>Max</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let maxValue of maxValueTable">
                    <td> {{ maxValue | numberFormatter: (getUnit() | async)}}</td>
                </tr>
            </tbody>
        </table>
        <table style="width:100%;">
            <thead>
                <tr>
                    <th>Min</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let maxValue of minValueTable">
                    <td> {{ MinValue| numberFormatter: (getUnit() | async)}}</td>
                </tr>
            </tbody>
        </table>

</div>

CodePudding user response：

You can create a function that will combine min and max values into an array like that:

mergeIntoArray(maxValue: Array<number>, minValue: Array<number>): IMergedObj[] {
let mergedArray = [];
maxValue.forEach((value, index) => {
  let tempObj = {};
  tempObj['maxValue'] = value;
  tempObj['minValue'] = minValue[index];
  mergedArray.push(tempObj);
});

return mergedArray;

}

and call this function like that:

let minAndMax = []; 

this.minAndMax = this.mergeIntoArray(this.maxValueTable, this.minValueTable);

after that, use this variable (minAndMax) in your HTML template. This way you do not need to use ngFor twice.

<table style="width:100%;">
  <thead>
    <tr>
      <th>Max</th>
      <th>Min</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of minAndMax">
      <td>{{ item.maxValue }}</td>
      <td>{{ item.minValue }}</td>
    </tr>
  </tbody>
</table>

Here is the stackblitz link created for you. Hope that might help you.

CodePudding user response：

You can use *ngTemplateOutlet for this case:

<div style="display: flex;">
  <ng-container *ngTemplateOutlet="tableTemplate; context: {$implicit: maxValueTable, header: 'Max'}"></ng-container>
  <ng-container *ngTemplateOutlet="tableTemplate; context: {$implicit: minValueTable, header: 'Min'}"></ng-container>
</div>
<ng-template #tableTemplate let-values, let-header="header">
    <table style="width:100%;">
        <thead>
            <tr>
                <th>{{ header }}</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let value of values">
              <td> {{ value | numberFormatter: (getUnit() | async) }}</td>
            </tr>
        </tbody>
    </table>
</ng-template>

And you will get the same table rendered twice - for Max and Min values.

As you can see, the arguments are passed as a second argument inside ngTemplateOutlet:

 context: {$implicit: valuesArgument, header: headerArgument}

Later you could use this template to create infinite amount of tables:

<div *ngFor="let table of tables">
  <ng-container *ngTemplateOutlet="tableTemplate; context: {$implicit: table.values, header: table.header}"></ng-container>
</div>

Assuming your tables property will look like

export class C {
  tables: Table[] = [{header: 'Min', values: [1, 2, 3]}, {header: 'Max', values: [4, 5, 6]}, {header: 'Other', values: [0, -1, -2]}]
}