代码之家 › 专栏 › 技术社区 › Deadpool

NGFOR角形制造5个潜水舱和5个ULS-而不是内部物品

ngfor angular-directive dom angular javascript

-4

Deadpool · 技术社区 · 7 年前

这个问题是NGFOR及其内部生成的循环项的令人惊讶的行为。

我正在做一个简单的例子,在Angular4/5/6中引用*ngfor。问题是我希望1个分区包含5个段落。我很惊讶地看到,我得到了5个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组件.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.组件.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>

3 回复 | 直到 7 年前

1

0

Sudhir Ojha 7 年前

把你的 ngFor 在 <p> 标记而不是 <div> 它将在一个分区中创建5个段落,如下所示:

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

2

0

Sanoj_V 7 年前

你需要把 *NGOF 在段落标记内

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

3

0

Lê Äình Báº£o Tín 7 年前

请仔细检查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=…”

你写了:ngfor=…” 您必须重写为:*ngfor=…”

希望能有所帮助!