ngFor в Angular делает 5 делений и 5 Uls - вместо внутренних предметов

Question

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

Я делаю простой пример для ссылки * ngFor в Angular4 / 5/6.Проблема в том, что я ожидал, что 1 div будет содержать 5 абзацев.Я поражен, увидев, что вместо этого получаю 5 делений, каждый из которых содержит 1 абзацПочему это и как это исправить?Я удивлен, то же самое происходит с элементами ul-li также !!!- странно.

abc.component.html

 <div *ngFor="let x of students">
   <p>{{x.name}}, {{x.age}}, {{x.country}}, {{x.gender}}</p>
 </div>

abc.component.ts

  students = [
    {name: "Jack", age: 29, gender:"male", country: "USA"},
    {name: "Ronald", age: 33, gender: "male", country: "UK"},
    {name: "Lisa", age: 19, gender: "female", country: "UK"},
    {name: "Donald", age: 43, gender: "male", country: "Austrailia"},
    {name: "Simera", age: 23, gender: "female", country: "Italy"}
  ];

abc.component.css

div{border:1px solid black;}

Даже для ul-li (я получаю ul, сгенерированный 5 раз, содержащий 1в каждой)

<ul *ngFor="let x of students">
  <li>{{x.name}}, {{x.age}}</li>
</ul>

Answer 1

Вам нужно поместить * ngFor внутри тега абзаца

<div>
   <p *ngFor="let x of students">
      {{x.name + ', ' + x.age + ', '+ x.country + ', '+ x.gender}}
   </p>
</div>

Answer 2

Пожалуйста, просмотрите внимательно 2 кода:

// 1

 <div *ngFor="let x of students">
   <p>{{x.name}}, {{x.age}}, {{x.country}}, {{x.gender}}</p>
 </div>

// 2

<ul ngFor="let x of students>
  <li>{{x.name}}, {{x.age}}</li>
</ul>

В 1: Вы писали: * ngFor = "..."

В 1: Вы писали: ngFor = "..." Вы должны переписать в: * ngFor = "..."

Надеюсь на помощь!

Answer 3

Поместите ваш ngFor на <p> тег вместо <div>, который создаст 5 абзацев в одном div.Like следующим образом:

<div>
   <p *ngFor="let x of students">{{x.name}}, {{x.age}}, {{x.country}}, {{x.gender}}</p>
 </div>