组件输入参数接收为 "undefined" 但已指定值

Question

我的 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 方法

之间的值

Answer 1

在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

组件输入参数接收为 "undefined" 但已指定值

Component input parameter is received as "undefined" but a value has been specified

undefined

angular