角4 - テンプレートエラーでelseを使用する場合

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> 

このエラーが発生する理由についての詳細はこちらから（ジョイ・クレイさんのコメント）あなたが使用する必要が

Just to add a little more context - all structural directives (i.e. the ones that begin with a *) compile down to template attributes, which both explains why you can't have multiple, and why the error message is what it is.

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

Answer 2

ラッピング部分、1つだけ要素ごとのステートメント

<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>