Question

我处理的项目之一是代码以下。你能告诉我它的作用吗？我知道*ngFor和*ngIf。但这些[ngForOf]="topicdata"和ngFor let-topic是什么？我可以更好地简化以下代码吗？

 <ng-template ngFor let-topic [ngForOf]="topicdata">
        <topic *ngIf="topic.num_of_definitions>0" [data]="topic"></topic>
 </ng-template>

我想如下所示。

<topic *ngFor="let topic of topicdata" [data]="topic" 
*ngIf="topic.num_of_definitions>0"></topic>

但是它显示了这个错误：

[Angular]在一个元素上不能有多个模板绑定。使用只有一个名为＆＃39; template＆＃39;的属性或以*
为前缀

Answer 1

*ngFor指令是Angular调用microsyntax的东西。 Microsyntax 本质上为开发人员提供了一种以更紧凑和简单的方式配置指令的方法。你可以看到有些东西正在使用微合成法来处理前面的*。

代码：

<topic *ngFor="let topic of topicdata"> </topic>

例如，等于：

<ng-template ngFor let-topic [ngForOf]="topicdata">
   <topic> ... </topic>
</ng-template>

就像您在问题中的例子一样。

简而言之 - 您可以使用*ngFor="let topic of topicdata"替换代码并获得相同的结果。

编辑 - 修复：* ngIf在同一行

Angular不允许您在同一元素上使用两个或更多结构指令。因此，作为在同一行使用*ngIf的一种方法，我建议循环使用<ng-container>元素并将<topic>放在该元素中。

<ng-container *ngFor="let topic of topicdata">
   <topic *ngIf="topic.num_of_definitions > 0"> ... </topic>
<ng-container>

更多信息ng-container here

Answer 2

它只是ngFor的不同语法。 let-topic [ngForOf]="topicdata"从topicdata数组创建主题变量。您可以按如下方式编写它，创建您使用的语法（使用ng-template）

<div *ngFor="let topic of topicdata">
    // some template
</div>

找到更多信息