угловой 4 как нарезать только на ощупь?

Question

HTML

<h4>NgFor (grouped)</h4>
 <ul *ngFor="let group of peopleByCountry | slice:0:1 "> 
   <li>{{ group.country }}</li>
   <ul>
    <li *ngFor="let person of group.people" | slice:0:1 > 
      {{ person.name }}
    </li>
   </ul>
 </ul>

Файл TS

peopleByCountry: any[] = [
    {
      'country': 'UK',
      'people': [
        {
          "name": "Douglas  Pace"
        },
        {
          "name": "Mcleod  Mueller"
        },
      ]
    },
    {
      'country': 'US',
      'people': [
        {
          "name": "Day  Meyers"
        },
        {
          "name": "Aguirre  Ellis"
        },
        {
          "name": "Cook  Tyson"
        }
      ]
    }
  ];

Я хочу показать первых людей только для каждой страны.

но когда я разрезаю его единственную скрытую личность, мы можем решить это?

Я хочу, чтобы это было только в одном массиве, но мне нужно показывать только ограниченное содержимое из каждой группы.

Answer 1

Чтобы улучшить уже полученный ответ, вы можете добавить условие if, чтобы проверить, есть ли в массиве people контент, иначе это может привести к ошибке.

<h4>NgFor (grouped)</h4>
<ul *ngFor="let group of peopleByCountry "> 
    <li>{{ group.country }}</li>
    <ul>
        <li *ngIf="group.people.length > 0"> 
            {{ group.people[0].name }}
        </li>
    </ul>
</ul>`

Вот скрипка: https://jsfiddle.net/uq3cyk5d/

Редактировать

После того, как я увидел ваш комментарий, я думаю, что ваш выбор имен для показа выглядит довольно случайным. Чтобы вы могли решить, какие имена показывать, я просто ввел другой атрибут в ваши данные. С помощью свойства show вы можете определить, какие имена должны отображаться в списке, а какие нет.

данные:

peopleByCountry: any[] = [
{
  'country': 'UK',
  'people': [
    {
      "name": "Douglas  Pace",
      "show": true
    },
    {
      "name": "Mcleod  Mueller",
      "show": false
    },
  ]
},
{
  'country': 'US',
  'people': [
    {
      "name": "Day  Meyers",
      "show": true
    },
    {
      "name": "Aguirre  Ellis",
      "show": true
    },
    {
      "name": "Cook  Tyson",
      "show": false
    }
  ]
}

];

HTML:

<ul *ngFor="let group of peopleByCountry "> 
    <li>{{ group.country }}</li>
    <ul>
        <div *ngFor="let person of group.people">
            <li *ngIf="person.show"> 
                {{person.name}}
            </li>
        </div>
    </ul>
</ul>

Я обновил скрипку: https://jsfiddle.net/uq3cyk5d/2

Answer 2

Вам не нужно проходить через людей, если вы хотите показать только первого человека.

<h4>NgFor (grouped)</h4>
 <ul *ngFor="let group of peopleByCountry"> 
   <li>{{ group.country }}</li>
   <ul>
    <li > 
      {{ group.people[0].Name }}
    </li>
   </ul>
 </ul>