Как работает реализация переменной области действия в * ngFor - PullRequest
Новая
       10

Как работает реализация переменной области действия в * ngFor

0 голосов
/ 24 января 2019

В Angular мы можем использовать * ngFor следующим образом: 

<li *ngFor="let hero of heroes">
  {{ hero }}
</li>

Но как Angular определяет переменную области действия hero и смогу ли я реализовать то же самое? Меня интересует только переменная области действия, а не циклическая часть.

Ответы [ 2 ]

0 голосов
/ 24 января 2019

Хорошо, я смог решить мою проблему. Я не понял, что сам могу использовать следующий синтаксис: 

*ngFor="let test...."

С этим я смог создать следующую директиву: 

import { Directive, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[appWrapper]',
})
export class WrapperDirective {
  constructor(viewContainer: ViewContainerRef, template: TemplateRef<any>) {
    viewContainer.createEmbeddedView(
      template,
      { ['$implicit']: 'Max Mustermann' },
      0,
    );
  }
}

Эту директиву теперь можно использовать так: 

<div *appWrapper="let name">{{ name }}</div>

Есть ли способ избавиться от let name part?

Этот пост Stackoverflow помог мне реализовать мою идею

0 голосов
/ 24 января 2019

Все публичные переменные (функции), определенные в component.ts, доступны из component.html и могут быть показаны с использованием интерполяции и выражения шаблона

Когда у вас есть * ngFor, когда вы определяете «переменную let массива», переменная доступна внутри * ngFor и является каждым элементом массива

Если вы хотите объявить переменную, используйте ng-if-let , например 

<div *ngIf="'hello word' as greeting">
  {{greeting}}
</div>
...