Как динамически создать <li> в ANGULAR

Вопрос-ответ JavaScript
1

Как сделать, чтобы каждый элемент в массиве skills был в отдельном li т.е. сейчас так

а нужно вот так

вот мой код

 people = [
    {name:"Aram", surname:"Hakobyan",skills:["Angular", "react",], salary:125000},
    {name:"Gago", surname:"Hakobyan",skills:["Angular", "react", "C#"] ,salary:45000},
    {name:"Narek", surname:"Hakobyan",skills:["Angular", "react",], salary:350000},
    {name:"Saqo", surname:"Hakobyan",skills:["Angular", "react",], salary:420000},
  ]

<table class="table table-bordered table-dark">
    <tr>
      <th>name</th>
      <th>surname</th>
      <th>skills</th>
      <th>salary</th>
    </tr>
    <tr [class.bg-success]="item.skills.length==3" *ngFor="let item of people">
      <td>{{item.name}}</td>
      <td>{{item.surname}}</td>
      <td>
        <ul>
          <li *ngFOR="let skl of skills">{{item.skills}}</li>
        </ul>
      </td>
      <td>{{item.salary}}</td>
    </tr>
  </table>
2

Здається тут в тебе помилка.
Треба використовувати змінну skl

<li *ngFor="let skl of skills">{{skl}}</li>

Також важливо використовувати trackBy, опціонально але важливо.

1 лайк