欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

<ng-template> doesn't work with *ngIf ; else syntax #17111 有大用

<ng-template> doesn't work with *ngIf ; else syntax #17111

 Closed
klinki opened this issue on 30 May 2017 · 10 comments

Comments

@klinki

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior
<ng-template *ngIf="something; else somethingElse">this is true</ng-template> doesn't work properly - only else branch is showed.

Expected behavior
It should work in both cases.

Minimal reproduction of the problem with instructions
http://plnkr.co/edit/ezqIoOmJ03sRCYG4kvkB?p=preview

Try to click on first toggle button

  • Angular version: 4.1.3

@vicb
Contributor

vicb commented on 31 May 2017

As mentioned in the previous comment <ng-template> is used to declare a template. What you want here is to hide/display some nodes:

          <ng-container *ngIf="first; else notFirst">
              Hello World!
          </ng-container>
          <ng-template #notFirst>
              Or Not!
          </ng-template>
@vicb vicb closed this on 31 May 2017
@klinki
Author

klinki commented on 31 May 2017

Right. Thanks, I was little bit confused, because lately I've been working with Aurelia and there it works little bit differently. (There everything works with <template> tag).

Btw I just noticed it is required to use <ng-template> for the second part. It is little bit confusing, since it cannot be used for the first part, but anything else cannot be used for the second :(

It would be perfect if this could be used:

<ng-container *ngIf="first; else notFirst">
   Hello World!
</ng-container>
<ng-container #notFirst>
  Or Not!
</ng-container>
@trotyl
Contributor

trotyl commented on 31 May 2017

It's OK to use ng-template all the time, but in that way the DSL syntax sugar is not available, like:

<ng-template [ngIf]="first" [ngIfElse]="notFirst">
  Hello World!
</ng-template>
<ng-template #notFirst>
  Or Not!
</ng-template>
@klinki
Author

klinki commented on 31 May 2017

@trotyl Thanks! I haven't seen that in documentation :(

@tytskyi

tytskyi commented on 31 May 2017  

@klinki there is an explanation of desugaring of * https://angular.io/docs/ts/latest/guide/structural-directives.html#!#asterisk
Check out the whole page - very useful for understanding.

@klinki
Author

klinki commented on 31 May 2017

@tytskyi Thanks. I was looking at https://angular.io/docs/ts/latest/api/common/index/NgIf-directive.html#!#ngIfElse-anchor and unfortunately there is no example with destructured syntax for if-else :(

@tytskyi

@klinki sorry, but there is that example on the page:

Find on page -> Syntax

Syntax
Simple form:

<div *ngIf="condition">...</div>
<div template="ngIf condition">...</div>
<ng-template [ngIf]="condition"><div>...</div></ng-template>
@klinki
Author

klinki commented on 31 May 2017

@tytskyi Not for else block. I was looking specifically for that one, since it is new for me.

@angular-automatic-lock-bot

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators on 12 Sep
@shipingzhong


来自  https://github.com/angular/angular/issues/17111

普通分类: