Dart: ng-for, ng-if rendered twice

[mark1010]

ng-for, ng-if, (ng-?), directives are rendered twice:

_dart:

@Component(
    selector: "hello-app",
    template: 'ng-for: <span *ng-for="#thing of things">{{thing}}, </span>',
    directives: const [CORE_DIRECTIVES])
class HelloCmp {
  List things = ['1','2'];
}

_output:

ng-for: 1, 2, 1, 2,

_version:
dart: Dart VM version: 1.13.0-dev.7.10, (& 1.13.0-dev.7.12 )
angular2: '^2.0.0-alpha.46',
+angular2: Nov 13 17:13:47 2015, commit a31e2f5
+angular2: Nov 17 15:24:36 2015, commit 2c8fcec

Modified dart playground, hello, with ng-if, ng-for.

@Component(
    selector: "hello-app",
    viewProviders: const [GreetingService],
    template:
        '''
        <div *ng-if=show>
          once?
        </div>

        <div>
          things: {{things}}<br/>
          ng-for: <span *ng-for="#thing of things">{{thing}}, </span>
        </div>

        <div class="greeting">{{greeting}} <span red>world</span>!</div>
           <button class="changeButton" (click)="changeGreeting()">change greeting</button>''',
    directives: const [RedDec,CORE_DIRECTIVES])
class HelloCmp {

  bool show = true;
  List things = ['abc','def'];

  String greeting;
  HelloCmp(GreetingService service) {
    this.greeting = service.greeting;
  }
  void changeGreeting() {
    this.greeting = "howdy!!!";
  }
}

result, under Chromium, and in the generated JS output.

once?
once?
things: [abc, def]
ng-for: abc, def, abc, def,
hello world!
change greeting

[mark1010]

Also broken under...
commit 0db0252
Date: Wed Nov 18 12:40:06 2015 -0800

This issue can also be reproduced by running the 'todo' example and adding a single entry, which is rendered twice.

[mhevery]

@IgorMinar, @vsavkin, @tbosch this looks weird? Any ideas why this is happening?

[IgorMinar]

maybe @yjbanov could help if @tbosch can't look into this on Monday.

[tbosch]

Victor will have a look...

[klihelp]

Still happens on angular 2.4.6 (typescript), directives inside ng-for rendered twice.

Directive:

import { Directive, Input, Output, EventEmitter, OnInit } from '@angular/core';

@Directive({
  selector: '[isLast]',
})
export class LastDirective implements 
  OnInit {
   @Input() isLast:boolean;
   @Output() lastDone:EventEmitter<boolean> = new EventEmitter<boolean>();
   ngOnInit() {
     if(this.isLast) {
       this.lastDone.emit(true);

      console.log('this.isLast', this.isLast);
     }
   }
}

Component:

// ngFor
<div class="line" [isLast]="last" (lastDone)="onLastDone($event)">

Console should echoes once, but echoes twice

this.isLast true
this.isLast true

[DzmitryShylovich]

do you use routerLinkActive directive?

[klihelp]

ActivatedRoute

[DzmitryShylovich]

reproduce on Plunkr

[klihelp]

ok, I try to create a plnkr..

NgFor on posts.items property causes a template refresh.

<div *ngIf="posts">
  <template ngFor let-post [ngForOf]="posts.items" let-last="last">
    <div class="line" [isLast]="last" (lastDone)="onLastDone($event)"></div>
  </template>
</div>

// Component ngOnInit
   this.getList()
        .catch( handleErr )
        .map( (res: Response) => { return res.json(); } )
        .subscribe(body => {
              this.posts.items = body;

              console.log('items loaded');
        })

NgFor on posts not caused a template refresh.
(A note, maybe thats because of the Promise and would be better to use with async pipe.)

<div *ngIf="posts">
  <template ngFor let-post [ngForOf]="posts" let-last="last">
    <div class="line" [isLast]="last" (lastDone)="onLastDone($event)"></div>
  </template>
</div>

// Component ngOnInit
   this.getList()
        .catch( handleErr )
        .map( (res: Response) => { return res.json(); } )
        .subscribe(body => {
              this.posts = body;

              console.log('items loaded');
        })

[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.}