Question

我想通过选择另一个子组件中的控件来在子组件中订购我的汽车清单。但是当我尝试更改时，出现类似“无法读取未定义的属性'GetCarList'的错误”。我对Angular的经验不是很多，所以我在互联网上找不到办法。

这是我的代码；

父项

index.html;

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

具有选择控件的子组件

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);
    }
}

带有汽车清单的子组件

items.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

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);
}

Answer 2

这里有很多问题：

@Output() carListOrder: CarsListItemsComponent;这没有道理。 Output()用于发出事件。
@Output() carListOrder: CarsListItemsComponent;是您自CarsListItemsComponent起的定义，但实际上您对该组件没有任何引用。这就是为什么您得到

无法读取未定义错误的属性'GetCarList'

要使其正常工作，您必须：

将Input（例如carList）添加到您的rac-carlistitems组件中。
将Output（例如infoChange）添加到您的rac-carlistinfo组件中。
然后侦听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);
    }

Angular无法读取未定义错误的属性“ GetCarList”

2 个答案: