Angular 中的 ngFor 制作 5 个 div 和 5 个 ul——而不是内部项目

Question

问题是 ngFor 及其内部生成的循环项的惊人行为。

我正在制作一个简单的例子来引用 Angular4/5/6 中的 *ngFor。 问题是我期望 1 个 div 包含 5 个段落。 我很惊讶地看到我得到了 5 个 div，每个 div 包含 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 个 li 项目）

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

Answer 1

将你的ngFor放在<p>标签而不是<div> ，这将在一个<div>创建 5 个段落。如下所示：

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

Answer 2

您需要将*ngFor放在段落标签内

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

Answer 3

请仔细查看 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="..."

希望有帮助！