Question

这是一些简单的模板标记：

<ng-container *ngIf="let ud = getUpdated()">
  <label>Updated</label>
  <span>{{ud | date:'MMM/y'}}</span>
</ng-container>

现在，虽然在绑定组件上定义了方法getUpdated（），但会出现两个问题。打字稿抱怨：

[Angular] TypeError：无法读取未定义的属性'toUpperCase'

进一步的问题在后续的块中表达。然后，代替为这个一次性getUpdated()构建一个完整的@Pipe，我缺少什么才能使这个工作？

Answer 1

这突出了使用NgForOf和NgIf之间语法的差异。

来自文档：

// NgForOf provides several exported values that
// can be aliased to local variables:

<li *ngFor="let user of userObservable | async as users; index as i; first as isFirst">
   {{i}}/{{users.length}}. {{user}} <span *ngIf="isFirst">default</span>
</li>

有两个选项可用于就地分配模板本地变量：

1）使用as语法：

<ng-container *ngIf="getUpdated() as ud">
  <label>Updated</label>
  <span>{{ ud | date: 'MMM/y' }}</span>
</ng-container>

2）使用let语法：

<ng-container *ngIf="getUpdated(); let ud">
  <label>Updated</label>
  <span>{{ ud | date: 'MMM/y' }}</span>
</ng-container>

另见

How to declare a variable in a template in Angular2

Ng模板和调用绑定组件上的函数/方法

1 个答案: