Question

我正在显示带有评论的帖子，对于没有评论的帖子，我想显示一条消息，说明该帖子没有评论，所以我尝试将其设置为：

<li *ngFor="let post of posts" (click)="select(post)" >
      {{ post.Summary }}
      <ul *ngIf="currentPost == post && commentsVisible">
        <li *ngIf="currentPost.comments.length > 0;else message" *ngFor="let comment of currentPost.comments" class="comment">
            <p>{{ comment.Name }}</p>
            <p>{{ comment.TemplateName }}</p>
            <p>{{ comment.CreatedByUserName }}</p>
            <p>{{ comment.Preview }}</p>
        </li>
        <ng-template #message>No comments for {{ post.Title }}</ng-template>
      </ul>
  </li>

我收到错误：

Unhandled Promise rejection: Template parse errors:
Can't have multiple template bindings on one element. Use only one attribute named 'template'

Answer 1

我相信这是在抱怨这条线。

<li *ngIf="currentPost.comments.length > 0;else message" *ngFor="let comment of currentPost.comments" class="comment">

您不能在同一元素上拥有*ngIf和*ngFor。

这应该有效：

<li *ngFor="let post of posts" (click)="select(post)" >
      {{ post.Summary }}
        <ul *ngIf="currentPost == post && commentsVisible">
          <ng-container *ngIf="currentPost.comments.length > 0;else message">
            <li *ngFor="let comment of currentPost.comments" class="comment">
                <p>{{ comment.Name }}</p>
                <p>{{ comment.TemplateName }}</p>
                <p>{{ comment.CreatedByUserName }}</p>
                <p>{{ comment.Preview }}</p>
            </li>
         </ng-container>
        <ng-template #message><li>No comments for {{ post.Title }}</li></ng-template>
      </ul>
  </li>

有关此错误发生原因的详细信息：（ Joy Clay的评论）

只是添加一点上下文 - 所有结构指令（即以*开头的那些编译为模板属性，这两个都解释了为什么你不能有多个，以及为什么错误消息就是它。

https://angular.io/docs/ts/latest/guide/structural-directives.html#!#asterisk

Answer 2

您需要使用包装div，每个元素只需要一个ng语句。

<li *ngFor="let post of posts" (click)="select(post)" >
    {{ post.Summary }}
    <ul *ngIf="currentPost == post && commentsVisible">
    <li *ngFor="let comment of currentPost.comments" class="comment">
        <span *ngIf="currentPost.comments.length > 0;else message">
            <p>{{ comment.Name }}</p>
            <p>{{ comment.TemplateName }}</p>
            <p>{{ comment.CreatedByUserName }}</p>
            <p>{{ comment.Preview }}</p>
        </span>
    </li>
    <ng-template #message>No comments for {{ post.Title }}</ng-template>
    </ul>
</li>

Answer 3

我相信这种微小的改变可能会为您解决问题。让我知道。如果没有，也许快速的掠夺者会有所帮助。

<li *ngFor="let post of posts" (click)="select(post)" >
      {{ post.Summary }}
      <ul *ngIf="currentPost == post && commentsVisible">
        <li *ngFor="let comment of currentPost.comments" class="comment">
            <div *ngIf="currentPost.comments.length > 0;else message">
              <p>{{ comment.Name }}</p>
              <p>{{ comment.TemplateName }}</p>
              <p>{{ comment.CreatedByUserName }}</p>
              <p>{{ comment.Preview }}</p>
            </div>
           <ng-template #message>No comments for {{ post.Title }}</ng-template>
        </li>
      </ul>
  </li>

Angular 4 - 在模板错误中使用if else

3 个答案: