[英]Angular Directive input is not being set
I just cant find this issue here... 我只是在这里找不到这个问题...
The directive: 指令:
@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';
}
}
}
The template 模板
<div appListData [data]=employees [layout]="grid"></div>
The log outputs : the layout is undefined - WHY? 日志输出:布局未定义-为什么?
I am also not sure how to load the external template files in my div. 我也不确定如何在div中加载外部模板文件。 thanks.
谢谢。
EDIT 编辑
Per suggestions, doing the following prints out both inputs, I will stick with the second one moving forward. 根据建议,执行以下操作将打印出两个输入,我将坚持第二个输入。 @nkuma_12 answer explains how it's looking for the grid property in the component's class which made sense - as eventually there will be a button changing a layout variable.
@ nkuma_12的答案说明了如何在组件的类中查找grid属性,这很有意义-最终将有一个按钮可以更改布局变量。
<div appListData [data]=employees layout="grid"></div>
<div appListData [data]=employees [layout]="'grid'"></div>
I have been reading the documentation here on structural directives - nothing helped me out there. 我一直在这里阅读有关结构指令的文档-那里没有任何帮助。 https://angular.io/guide/structural-directives#write-a-structural-directive
https://angular.io/guide/structural-directives#write-a-structural-directive
Since you are using 由于您正在使用
@Input('layout') layout: string;
in directives. 在指令中。
When passing input , i see you are passing [layout]="grid"></div>
which makes it look for grid variable in your component where it's used and gets undefined
. 传递输入时,我看到您传递的是
[layout]="grid"></div>
,这使它在使用它的组件中寻找并不undefined
grid变量。
You should pass value grid in single quotes: [layout]="'grid'"></div>
您应该在单引号中传递值网格:
[layout]="'grid'"></div>
Also your data input value should be in double quotes: [data]="employees"
. 同样,您的数据输入值也应该用双引号引起来:
[data]="employees"
。 Please check documentation for more details. 请检查文档以获取更多详细信息。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.