角度 – 具有* ngIf内部的模板,在更改模型后无法工作

发布时间：2020-12-17 17:27:45 所属栏目：安全来源：网络整理

导读：问题在Angular 2.2的版本之后. *,我注意到我的应用程序的某些组件存在问题,即在更新数据后,视图中的数据是错误的(它显示的列表具有正确的大小,但仅包含第一项的数据). 示范我创建了this Plunker with a simple example的问题. 这种使用会导致问题： list-c

问题

在Angular 2.2的版本之后. *,我注意到我的应用程序的某些组件存在问题,即在更新数据后,视图中的数据是错误的(它显示的列表具有正确的大小,但仅包含第一项的数据).

示范

我创建了this Plunker with a simple example的问题.

这种使用会导致问题：

<list-component [data]="list">
  <template pTemplate let-item>
      <b *ngIf="item % 2 == 0">{{item}}</b>
      <del *ngIf="item % 2 != 0">{{item}}</del>
  </template>
</list-component>

发生问题的说明：

>在Plunker中打开示例;
>正面第二个块(带* ngIf的模板:)
>单击“刷新”按钮;
>再次查看第二个块(带有* ngIf的模板:);

题

什么可能导致这个问题,以及如何解决它？

解决方法

在* ngIf的内部模板中,您有几个TemplateRef.当数据被改变时,它是混合的.

1)因此,您必须指定您正在使用的ng-content中的哪个模板,例如：

<list-component [data]="list">
  <template #tmpl let-item>  <== notice #tmpl
    <b *ngIf="item % 2 == 0">{{item}}</b>
    <del *ngIf="item % 2 != 0">{{item}}</del>
  </template>
</list-component>

然后在ListComponent中：

@ContentChild('tmpl') template: TemplateRef<any>;

Plunker Example

附：但为什么不使用ngTemplateOutlet或ngForTemplate解决方案？

例如：

> How to pass an expression to a component as an input in Angular2?

2)我在你的示例PrimeTemplate指令中注意到了.所以这是第二种选择：

@ContentChild(PrimeTemplate) primeTmpl: PrimeTemplate;

和HTML：

<template-loader [data]="item" [template]="primeTmpl.template"></template-loader>

Plunker Example

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!