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。这样，我们就可以通过更改input从组件动态更改分配给data的值。

这类似于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

组件输入参数被接收为“未定义”，但已指定值

1 个答案: