Javascript NGF用于制作5个div和5个uls的角度，而不是内部项目

问题是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.css

  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"}
  ];

div{border:1px solid black;}

即使是ul li（我得到ul生成5次，每次包含1个li项目）

{x.name}，{x.age}

---

将你的

ngFor

放在

标签上，而不是

，这将在一个分区中创建5个段落。如下所示：

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

{{x.name}、{{x.age}、{{x.country}、{{x.gender}

您需要在段落标记中添加*ngFor

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

{{x.name+'，'+x.age+'，'+x.country+'，'+x.gender}

请仔细查看剪掉的两个代码：

/1

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

{x.name}、{x.age}、{x.country}、{x.gender}

/2

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

---

您需要循环段落标记而不是div标记行为是否有差异？您实际上没有显示第二个示例的输出，因为它的语法不太正确；如果写得正确，我希望看到五个ULs每个包含一个LI。也许你应该浏览AngularJS的基本知识，它与AngularJS不完全一样：@Deadpool:no，StackOverflow有一些机制，如果用户执行串行下行投票来“撤销”它（可能在24-48小时内）。如果你怀疑某人投了“不应有的”票（赞成票和反对票），你也可以打旗子。你首先问的是两件看起来相同但行为不同的事情的令人惊讶的行为，这确实令人惊讶，只是它们实际上没有表现出不同。现在你问的是两个看起来一样的东西的惊人行为，它们的行为相同，这。。。一点也不奇怪。这两个问题都不是一个特别有用的问题；代码的行为如文档所示。
<ul ngFor="let x of students>
  <li>{{x.name}}, {{x.age}}</li>
</ul>