* ngFor不适用于表数据Angular

Question

我已成功从rest api重试数据。现在，我想将它们映射到表中。但是浏览器控制台中出现以下错误。请任何人回答代码有什么问题。

app.component.html

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>

  </tr>
  <tr *ngFor="let item of persondata; let i = index">
    <td>{{item.name}}</td>
    <td>{{item.id}}</td>

  </tr>


  </tr>
</table>

这是否违反约定？

这是控制台中给出的错误。

compiler.js:2175 Uncaught Error: Template parse errors:
Unexpected closing tag "tr". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags ("


  [ERROR ->]</tr>
</table>"): ng:///AppModule/AppComponent.html@47:2
    at syntaxError (compiler.js:2175)
    at DirectiveNormalizer._preparseLoadedTemplate (compiler.js:17686)
    at compiler.js:17677
    at Object.then (compiler.js:2166)
    at DirectiveNormalizer._preParseTemplate (compiler.js:17677)
    at DirectiveNormalizer.normalizeTemplate (compiler.js:17664)
    at CompileMetadataResolver.loadDirectiveMetadata (compiler.js:19820)
    at compiler.js:25829
    at Array.forEach (<anonymous>)
    at compiler.js:25828

Answer 1

错误非常明显，以至您在结尾处没有多余的</tr>标记，请按如下所示更改HTML

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr *ngFor="let item of persondata; let i = index">
    <td>{{item.name}}</td>
    <td>{{item.id}}</td>
  </tr>
</table>

Answer 2

您应该从表末尾删除末尾</tr>标签。可能是额外的。使用以下代码：

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>

  <tr *ngFor="let item of persondata; let i = index">
    <td>{{item.name}}</td>
    <td>{{item.id}}</td>
  </tr>

</table>