*在模板标记内使用时,ngIf无效

时间:2017-01-05 06:47:28

标签: angular angular2-template

我们在Angular 2的模板标签中使用* ngIf,之后如果我们从模板控件内部触发click事件,则模板内的HTML将被删除或更改。

这是我正在使用的转发器控件,

@Component({
selector: "repeater",
template:

`
    <div *ngIf='children'>
        <div *ngFor='let current of source'>
            <template [ngTemplateOutlet]="children._results[0]" OutletContext]="{ item: current }">
            </template>
         </div>
    </div>`
})

export class Repeater {
    @ContentChildren(TemplateRef)
    children: QueryList<TemplateRef<any>>

    @Input()
    source: Array<any>;
}

这是我的应用程序组件代码

@Component({
  selector: 'my-app',
  template: `<repeater [source]="dllApprovalStatus">
          <template let-data="item">
         {{data.name}}
              <p *ngIf='data.name==1' (click)='myclick(data.name)'> Array value {{data.name}}</p>
          </template>
        <repeater>`,
})
export class App {
  name:string;
   dllApprovalStatus: any = [{ name: 1 }, { name: 1 }, { name: 0 }];
   constructor() {
    this.name = 'Angular2'
  }

   myclick(data: any) {

   alert(data);
  }
}

在这里,我还制作了一个plunker repo http://plnkr.co/edit/XHZz52?p=preview

此处如果单击输出的数组列表,模板将更改。 这在Angular 2 rc4中运行良好,但我们已升级到Angular2~2.2

0 个答案:

没有答案