Входной параметр компонента получен как «неопределенный», но значение было указано
У меня есть следующее TableMultipleEditComponent в моем приложении Angular:
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.info(">> 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
Ответы 1
В Angular, когда вы используете [input] = "data" в своем HTML, data в основном является шаблонным выражением. Шаблонные выражения похожи на JavaScript.
Angular выполняет data и присваивает его свойству цели привязки, здесь input. Это позволяет нам динамически изменять значение, присвоенное input из компонента, путем изменения data.
Это похоже на интерполяцию в AngularJS, где для отображения {{data}} в вашем HTML, 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
Попробуйте удалить [ ] из
[recordId] = "_INSERT_". Angular обрабатывает "_INSERT_" как выражение и пытается его оценить - следовательно, не определено.