如何使用 *ngfor 在对象数组的另一个响应中循环数组列表？

Question

let say I have two responses. one response consist of array, let temp1 = [name, description, address] ;

second response consist of array of objects, let temp2 =

[
  {
    name: "name1",
    description: "not a current user",
    address: "address 1",
    phoneno: 123,
    check1: true,
    pined: "no",
    user: "yes"
  },
  {
    name: "name2",
    description: "current user",
    address: "address 2",
    phoneno: 1234,
    check1: false,
    pined: "no",
    user: "yes"
  },
  {
    name: "name3",
    description: "current user",
    address: "address 3",
    phoneno: 12345,
    check1: false,
    pined: "no",
    user: "yes"
  }
]

  <table>
   <thead>
   <tr>
     <th *ngFor="let temp of temp1">{{temp}}</th>
   </tr>
</thead>
<tbody>
 <tr><td *ngFor="let body of temp2; let i = index">{{body.temp[i]}}</td></tr>
</tbody>
 </table>

I want to loop tbody only with list of array available in temp 1, not with all the list in temp2 it should be dynamic. whatever its in temp1 only that values should be loop in tbody.

Thanks in advance, I'm using angular 11 in my project

Answer 1

It's easily solved with a classic JavaScript class getter. Getters are method defined with the get keyword that are visible as properties. Let's say you have something like this:

class Cl {
  constructor() {
    this.data = [1, 2, 3, 4, 5];
  }
  
  get dt() {
    return this.data.filter(n => n < 4);
  }
}

const cl = new Cl();
console.log(cl.dt);

The console will output [1, 2, 3]. Now that we have made this clear, let's find an answer to your question:

get dt() {
    const ret = [];
 
    for (const elem of this.temp2) {
        ret.push(
            this.temp1.reduce((obj, k) => Object.assign(obj, {[k]: elem[k]}), {})
        );
    }

    return ret;
}

Let's dig into the code:

1. The dt getter will return an array with objects that holds the proper subset of keys
2. For each element in this.temp2, we take the keys in the this.temp1 array and using reduce we reduce the keys array to an object
3. The object obtained by the reduce function is a subset of each elem you are iterating against

Obviously, you'll have to use the *ngFor against the dt getter.

Hope this solve your problem (: Happy coding!

EDIT Even better using the array's map method

get dt() {
    return this.temp2.map(elem => this.temp1.reduce((obj, k) => Object.assign(obj, {[k]: elem[k]}), {}));
}