Входной параметр компонента принимается как «неопределенный», но было указано значение - PullRequest
Новая
       53

Входной параметр компонента принимается как «неопределенный», но было указано значение

0 голосов
/ 30 мая 2019

В моем приложении 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 метод

1 Ответ

2 голосов
/ 30 мая 2019

В 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

...