Question

https://plnkr.co/edit/6Rf11kBMpXH09tbksj1J?p=preview

app.component.ts：

    @Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  list$: Observable<any>;

  constructor () {
    let list = [
    {color : 'red', op: 70},
    {color : 'green', op: 80},
    {color : 'blue', op: 60},
    {color : 'yellow', op: 50},
    {color : 'black', op: 40}
    ];
    this.list$ = Observable.from(list);
  }
}

app.component.html

<div direc [data]="list$">
     List fetched data
      <ul>
        <li *ngFor="let item of items">{{item.color}}</li>
      </ul>
  </div>

指令代码是：

    import { Input, Directive, AfterViewInit } from '@angular/core';
@Directive({
  selector: '[direc]'
})
export class DirecDirective implements AfterViewInit {
  @Input()
  data;

  items: any[];

  constructor() {}
  ngAfterViewInit() {
    this.data.take(3).toArray().subscribe(data => this.items = data);
    console.log(this.items);
  }

}

我无法访问＆lt; li＆gt;＆lt; / li＆gt;中的商品列表。如何访问装饰属性项？

我所做的是将Observable传递给指令。在ngAfterViewInit方法中，我有Observable，我用它来获取数据。数据被分配给指令 item 属性，我尝试在指令内容中使用它。浏览器控制台中没有错误，并且在ngAfterViewInit方法中成功列出了项目。在plunker更简化： https://plnkr.co/edit/6Rf11kBMpXH09tbksj1J?p=preview

direc指令中的* ngFor是指令。应该可以访问direc指令项，但它没有。或者至少没有任何渲染。

Answer 1

items不可用，因为指令的属性不在那里。您可以使用exportAs

@Directive({ 
  selector: '[direc]', 
  exportAs: 'direc', 
}) export class DirecDirective ... {

使其可用作模板变量

<div #d="direc" direc [data]="list">

然后使用该变量

访问它

<li *ngFor="let item of direc.items">{{item.color}}</li>

Plunker example

如何公开在指令内容中使用的指令属性

1 个答案: