Question

我正在尝试在我的项目中创建指令，该指令位于角度5.0中。我从指令属性中的组件传递值，然后在指令内部我想使用* ngFor来显示对象数组，这样做我遇到了问题。我的组件文件

   <ng-template cpLoop #thing="items" [cpLoopOf]="coverages">
       {{ items.cpLoopOf}}
    <div *ngFor="let header of items.cpLoopOf">
      {{ header }}
    </div>
  </ng-template>

现在在我的指令中我通过输入

获取值

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

@Directive({ 
     selector: '[cpLoop]',
     inputs:['cpLoopOf'],
     exportAs: 'items'
})
export class CpLoopDecorator implements OnInit {
    @Input('cpLoopOf') cpLoopOf:any[];
    constructor( private templateRef: TemplateRef<any>,
                 private viewContainer: ViewContainerRef) { 

                    console.log(this.cpLoopOf);
                 }

    ngOnInit() {
        console.log(this.cpLoopOf);
      }
}

现在，当我尝试在构造函数中控制值时，它给出了undefined但在onInit方法中它给出了

coverages = [
        { name: 'Austin', gender: 'Male', company: 'Swimlane' },
        { name: 'Dany', gender: 'Male', company: 'KFC' },
        { name: 'Molly', gender: 'Female', company: 'Burger King' },
      ];

现在我的html上看到了

<ng-component>
       <!--bindings={
  "ng-reflect-cp-loop-of": "[object Object],[object Object"
}-->

如何查看在我的指令中呈现的此列表

Angular 5.0指令如何在作为属性传递时绑定模板中的值

0 个答案: