Как динамически создать
  • в ANGULAR
  • Как сделать, чтобы каждый элемент в массиве 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>


    Ответы (1 шт):

    Автор решения: Татьяна Компаниец

    Нужно цикл прогнать по массиву item.skills:

    <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 skill of item.skills">{{skill}}</li>
            </ul>
          </td>
          <td>{{item.salary}}</td>
        </tr>
      </table>

    → Ссылка