Angular Не удается прочитать свойство 'GetCarList' с неопределенной ошибкой

Question

Я хочу заказать свой список автомобилей в дочернем компоненте, выбрав элемент управления из другого дочернего компонента. Но когда я пытаюсь измениться, я получаю сообщение об ошибке типа «Невозможно прочитать свойство GetCarList из неопределенного». Я не слишком разбираюсь в Angular, поэтому не могу найти выход в интернет.

А вот мои коды;

• Родительский компонент

index.html;

<rac-carlistinfo></rac-carlistinfo>
<rac-carlistitems></rac-carlistitems>

• Дочерний компонент с элементом управления Select

info.html;

<select id="slcOrder" name="slcOrder" class="m-select" (change)="onChange($event)">
    <option *ngFor="let item of orderList" value="{{ item?.Code }}">{{ item?.ShortDescription }}</option>
</select>

info.ts (CarsListInfoComponent)

import { Component, Output } from '@angular/core';
import { SiteService } from '../../../../services/site';
import { CarsListItemsComponent } from './items';

@Component({
    selector: 'rac-carlistinfo',
    templateUrl: './info.html'
})

export class CarsListInfoComponent {
    errorMsg: string;

    orderList: any;

    @Output() carListOrder: CarsListItemsComponent;

    constructor(private service: SiteService) {
    }

    ngOnInit() {
        this.GetLangContent();
    }

    onChange(event) {
        var target = event.target || event.srcElement || event.currentTarget;

        this.carListOrder.GetCarList(target.value);
    }

    GetLangContent() {
        this.service.get("Site", "GetLangContentByCode", "order").subscribe((resData: any) => {
            this.orderList = resData;
        }, resError => this.errorMsg = resError);
    }
}

• Дочерний компонент со списком автомобилей

элементов. html;

<div *ngFor="let item of carList">
    <h2>{{ item?.Title }}</h2>
    <span>{{ item?.Price }} TL</span>
</div>

items.ts (CarsListItemsComponent)

import { Component } from '@angular/core';
import { SiteService } from '../../../../services/site';

@Component({
    selector: 'rac-carlistitems',
    templateUrl: './items.html'
})

export class CarsListItemsComponent {
    errorMsg: string;

    carList: any;

    constructor(private service: SiteService) {
    }

    ngOnInit() {
        this.GetCarList();
    }

    public GetCarList(order: string = null) {
        this.service.get("Site", "GetCarList", order).subscribe((resData: any) => {
            this.carList = resData;
        }, resError => this.errorMsg = resError);
    }
}

Answer 1

Здесь много проблем:

1. @Output() carListOrder: CarsListItemsComponent; это не имеет смысла. Output() предназначен для передачи событий.
2. @Output() carListOrder: CarsListItemsComponent; вы определяете это по состоянию на CarsListItemsComponent, но на самом деле у вас нет никаких ссылок на этот компонент. Вот почему вы получаете

Невозможно прочитать свойство 'GetCarList' с неопределенной ошибкой

Чтобы получить эту работу, вам необходимо:

1. Добавьте Input (например, carList) к вашему rac-carlistitems компоненту.
2. Добавьте Output (например, infoChange) к вашему rac-carlistinfo компоненту.
3. Затем прослушайте infoChange к компоненту контейнера, который включает в себя другие и переместите туда GetCarList.

Положите все это.

//CarsListInfoComponent

@Output() infoChange = new EventEmitter<any>();

onChange(event) {
        var target = event.target || event.srcElement || event.currentTarget;

        this.infoChange.emit(target.value);
    }

//CarsListItemsComponent
@Input() carList: any[];

//Container component html

<rac-carlistinfo (infoChange)="GetCarList($event)"></rac-carlistinfo>
<rac-carlistitems [carList]="carList"></rac-carlistitems>

//Container component ts

carList: any[] = [];

GetCarList(order: string = null) {
        this.service.get("Site", "GetCarList", order).subscribe((resData: any) => {
            this.carList = resData;
        }, resError => this.errorMsg = resError);
    }

Answer 2

TBH Я не знаком с использованием @Output.

Если бы я был тобой, это был бы мой подход.

export class CarsListInfoComponent {
errorMsg: string;

orderList: any;

constructor(private service: SiteService, private carListOrder: CarsListItemsComponent) {
}

  ...

onChange(event) {
    var target = event.target || event.srcElement || event.currentTarget;

    this.carListOrder.GetCarList(target.value);
}