未设置角度方向输入

我只是在这里找不到这个问题…

指令:

@Directive({
  selector: '[appListData]'
})
export class ListDataDirective implements OnInit {

  @Input('data') data: object;
  @Input('layout') layout: string;

  templateUrl: string;

  constructor(private el: ElementRef) { }

  ngOnInit(): void {

    console.log(JSON.stringify(this.data));
    console.log(this.layout);

    this.templateUrl = 'list-data-layouts/list.html';

    if (this.layout === 'grid') {
      this.templateUrl = 'list-data-layouts/grid.html';
    } else if (this.layout === 'list') {
      this.templateUrl = 'list-data-layouts/list.html';
    }

  }
}

模板

<div appListData [data]=employees [layout]="grid"></div>

日志输出:布局未定义-为什么?

我也不知道如何在我的分区中加载外部模板文件。谢谢。

编辑

根据建议,执行以下操作将打印出两个输入,我将继续进行第二个输入。@Nkuma_12 answer解释了它如何在组件类中查找网格属性,这是有意义的——因为最终会有一个按钮改变布局变量。

<div appListData [data]=employees layout="grid"></div> 
<div appListData [data]=employees [layout]="'grid'"></div>

我一直在阅读关于结构指令的文档——没有什么帮助我。 https://angular.io/guide/structural-directives#write-a-structural-directive