Как объявить переменную в шаблоне в Angular

203

У меня есть следующий шаблон:

<div>
  <span>{{aVariable}}</span>
</div>

и хотел бы закончить с:

<div "let a = aVariable">
  <span>{{a}}</span>
</div>

Есть ли способ сделать?

Сципион
источник
Мне интересно знать, каково требование / вариант использования для изменения имени параметра привязки, такого как этот пример?
LDJ
31
Это просто, чтобы предотвратить повторение чего-то вроде tab [element] .val для каждого экземпляра. Я знаю, что могу решить проблему в компоненте, но я просто смотрел на то, как это сделать в шаблоне (хотя я не могу в конечном итоге с этим решением).
Сципион
2
@LDJ один пример использования: эффективность. Используйте образец stackblitz.com/angular/… <mat-checkbox [флажок] = " downndantsAllSelected (node)» [Indeterminate] = «downndantsPartiallySelected (node)» (change) = «todoItemSelectionToggle (node)»>> {{узел. item}} </ mat-checkbox> на самом деле дочерние_парциальные_выборы () вызывают нисходящие_связанные_выбранные (). Это означает, что иногда потомкиAllSelected вызывается дважды. Если есть локальная переменная, этого можно избежать.
Steven.Xi
3
<div *ngIf="{name:'john'} as user1; let user"> <i>{{user1|json}}</i> <i>{{user|json}}</i> </div>
dasfdsa
@dasfdsa Я верю user1 === user, таким образом, вы либо делаете, *ngIf="{name:'john'} as user1либо *ngIf="{name:'john'};let userкак в ответе юрзуи .
CPHPython

Ответы:

176

Обновить

Мы можем просто создать директиву как *ngIfи назвать ее*ngVar

нг-var.directive.ts

@Directive({
    selector: '[ngVar]',
})
export class VarDirective {
  @Input()
  set ngVar(context: any) {
    this.context.$implicit = this.context.ngVar = context;
    this.updateView();
  }

  context: any = {};

  constructor(private vcRef: ViewContainerRef, private templateRef: TemplateRef<any>) {}

  updateView() {
    this.vcRef.clear();
    this.vcRef.createEmbeddedView(this.templateRef, this.context);
  }
}

с этой *ngVarдирективой мы можем использовать следующее

<div *ngVar="false as variable">
      <span>{{variable | json}}</span>
</div>

или

<div *ngVar="false; let variable">
    <span>{{variable | json}}</span>
</div>

или

<div *ngVar="45 as variable">
    <span>{{variable | json}}</span>
</div>

или

<div *ngVar="{ x: 4 } as variable">
    <span>{{variable | json}}</span>
</div>

Пример Plunker Angular4 нгВар

Смотрите также

Оригинальный ответ

Угловой v4

1) div+ ngIf+let

<div *ngIf="{ a: 1, b: 2 }; let variable">
  <span>{{variable.a}}</span>
  <span>{{variable.b}}</span>
</div>

2) div+ ngIf+as

Посмотреть

<div *ngIf="{ a: 1, b: 2, c: 3 + x } as variable">
  <span>{{variable.a}}</span>
  <span>{{variable.b}}</span>
  <span>{{variable.c}}</span>
</div>

component.ts

export class AppComponent {
  x = 5;
}

3) Если вы не хотите создавать оболочку, как divвы можете использоватьng-container

Посмотреть

<ng-container *ngIf="{ a: 1, b: 2, c: 3 + x } as variable">
  <span>{{variable.a}}</span>
  <span>{{variable.b}}</span>
  <span>{{variable.c}}</span>
</ng-container>

Как @Keith упоминается в комментариях

это будет работать в большинстве случаев, но это не общее решение, поскольку оно полагается на правдивость переменной

Смотрите обновление для другого подхода.

yurzui
источник
10
это будет работать в большинстве случаев, но это не общее решение, так как полагается на variableправдивость
Кит
6
@Keith Спасибо за указание на это. Можете взглянуть на мой обновленный ответ
yurzui
3
Это должен быть новый ответ, поскольку он 1) более современен, чем другое решение 2) суммирует запросы на извлечение, связанные в текущем ответе, и экономит много времени 3) включает в себя примеры, встроенные, а не по внешней ссылке. Спасибо за показ этого. AFAIK любой объект, обернутый в {}, оценит как правдивый, так что это решение довольно надежно.
kvanberendonck
4
Например, расширяемые кнопки: *ngIf="{ expanded: false } as scope"и тогда, если вы используете загрузчик, вы можете просто использовать [ngClass]="{ 'in': scope.expanded }"и (click)="scope.expanded = !scope.expanded"вместо добавления чего-либо в ваши js/ tsфайлы.
kvanberendonck
1
связанная с github проблема (указывает на использование простого *ngIfвместо нестандартного материала ngvar): github.com/angular/angular/issues/14985
phil294