I am trying to display a table with values. Table has 5 columns, and in the 3rd column, I need value from another table. How can I implement this?

My html markup is:

list.component.html

<table >

            <thead>

                <tr>

                    <th> first </th>

                    <th> second </th>

                    <th> Third </th>

                    <th> Fourth </th>

                    <th> fifth </th>

                </tr>

            </thead>

            <tbody>

                <tr *ngFor=let item of items>



                    <td> {{item.name}}</td>

                    <td> {{item.subject}}</td>

                    <td *ngFor=let list of details>

                        {{list.firstName}}{{list.lastName}} ----> problem is here  next 2 tds are not displaying the values properly

                    </td>

                    <td> {{item.fisrt}}</td>

                    <td> {{item.second}}</td>

                </tr>

            </tbody>

        </table>

My item array

items[{name:, subject:, first:, second:}, {name:, subject:, first:, second:}]

My list array

  list[{firstName:abc, lastname:pqr}{firstName:abc, lastname:pqr}]

in the first two columns, the values are from one table, and the third column has a value from another table; the remaining two columns have the data from first table again.

How should I implement this?