在我的Angular应用程序中有以下TableMultipleEditComponent
:
export class TableMultipleEditComponent implements OnInit {
@Output() emitMultipleClose: EventEmitter<boolean> = new EventEmitter<
boolean
>();
@Output() emitHoverAndData: EventEmitter<any> = new EventEmitter<any>();
showBar: boolean;
@Input()
table: Table;
@Input()
checkedRows;
@Input()
recordId: string ;
ngOnInit() {
console.log(">> rId-oninit" , this.recordId) ;
.....
}
}
在html中,我将[recordId]
输入值作为_INSERT_
进行传递
<app-table-multiple-edit
[table]="table"
[checkedRows]="checkedRows"
[recordId]="_INSERT_"
(emitMultipleClose)="closeSingleRowInsert($event)"
(emitHoverAndData)="showMultipleEditStatus($event)">
</app-table-multiple-edit>
当我在控制台中运行它时,我总是得到>> rId-oninit undefined
我尝试过使用其他值,如"-1“,并清除缓存,因为您可能会猜到这意味着我已经没有选择了。
我做错了什么?什么可以在我的html和ngOnInit
方法之间改变值
发布于 2019-05-30 08:06:46
在Angular中,当您在HTML中使用[input]="data"
时,data
基本上是一个模板表达式。模板表达式类似于JavaScript。
Angular执行data
并将其分配给绑定目标的属性,这里是input
。这允许我们通过更改data
来动态地更改组件中分配给input
的值。
这类似于AngularJS中的插值,为了在HTML中显示{{data}}
,需要在控制器中定义data
。
在您的示例[recordId]="_INSERT_"
中,recordId是Input()
绑定目标,_INSERT_
是模板表达式。Angular尝试执行此表达式,但由于您尚未在组件中定义_INSERT_
,因此它的计算结果为undefined
。
如果您需要将一个常量字符串传递给您的@Input()
,只需像这样传递一个字符串作为表达式[recordId]="'This is just an example'"
即可。如果您要求它是动态的,则应该为组件中的_INSERT_
赋值。
由于模板表达式类似于JavaScript,因此如果需要,您甚至可以传递条件表达式[recordId]="recordExists ? '1' : null"
希望这能回答你的问题。
有关更多信息,请参阅文档:https://angular.io/guide/template-syntax#template-expressions
https://stackoverflow.com/questions/56369643
复制相似问题