HTTP 和嵌套对象 (Angular2 RC1 + TS)

Question

我在浏览器中显示我的数据时遇到了一些问题。为了解释我的问题，我使用了一些虚拟代码。我有一些嵌套对象导致了我的问题。在这里，我将显示一个嵌套对象来展示我的问题。

首先，我只对 Car 对象进行 http 调用。所以 saveCar 也像更新汽车一样，这取决于用户在应用程序中的操作。服务中的所有方法都可以正常工作。

所以我的服务看起来像这样:

@Injectable()
export class Service {

    constructor(private http: Http) { }

    saveCar(car: Car) {
       return this.http.post ....      
    }

    getCars(){
        return this.http.get...       
    }

    getById(id: string) {
        return this.http.get...       
    }    
}

然后我有一个 Car 类，其中嵌套对象“Brand”发挥作用，然后 Brand 有它自己的类，但我会忽略它。

export class Car {

    private brands: Array<Brand>;

    constructor(public id: string, public name: string) {
        this.brands = new Array<Brand>();
    }

    public getBrands(): Array<Brand> {
        return this.brands;
    }

    public addBrand(value: Brand): void {
        this.brands.push(value);
    }
    //some other methods.
}

然后我有一个列出所有汽车的列表组件，它可以正常工作!

@Component({
    selector: 'car-list',
    template: `
    <h1>Add Car</h1>
    <form (submit)="saveCar()">
        <input required [(ngModel)]="name" placeholder="Add car">
    </form>
    <br>
    <table>
        <tr *ngFor="let car of cars" >
        <td>{{car.name}}</td>
        <td><button (click)="goToDetail(car)">Detail</button></td>
        </tr>
    </table>
  `,
})


export class ListComponent implements OnActivate {
    id: string
    name: string;
    cars: Array<Car>

    constructor(public _service: Service, public _router: Router) {   }

    routerOnActivate(): void {
        this._service.getCars()
            .subscribe(cars => this.cars = cars);
    }

    saveCar() {
        let car = new Car(this.id, this.name)

        this._service.saveCar(Car)
            .subscribe(car => this.cars.push(car));

        this._service.getCars()//
            .subscribe(cars => this.cars = cars);
    }

    goToDetail(car:Car) {
        this._router.navigate(['/cardetail', car.id]);
    }

}

我的问题出在详细信息组件中，用户在单击特定汽车后会在其中进行导航。从数据库中路由和检索 Car 可以正常工作。我知道，因为如果我删除除 <h1>Car: {{car?.name}}</h1> 之外的所有模板猫王运算符(operator)可以很好地打印出这个名字。

但是我的细节组件看起来像这样:

@Component({
    selector: 'car-detail',
    template: `  
    <h1>Car: {{car?.name}}</h1>
    <hr>
    <button (click)="addBrand()">Add Brand</button>      
    <div *ngFor="let brand of car.getBrands(); let i=index">  
    <h2>Brand {{i+1}}</h2>
    </div>               
`,
})

export class DetailComponent implements OnActivate {

    @Input() car: Car;

    constructor(public _service: Service, public _router: Router) {    }

    routerOnActivate(curr: RouteSegment): void {
        let id = curr.getParam('id');
        this._service.getById(id)
            .subscribe(car => {
                this.car = car;
            });
    }

    addBrand() {
        this.car.getBrands().push(new Brand());
    }

    //some other methods
}

所以在我的细节组件中，我调用了所有方法，如:car.someMethod()以及嵌套的 Brand 对象，例如:brand.someMethod()在模板中。所以错误出现在调用方法时，例如在模板 'cannot get getBrands of undefined' 中我试过像这样放置 elvis 运算符:car?.getBrands()它不起作用。我试图用 elvis 运算符和 <div *ngIf = "car"></div> 将整个东西包装在一个 div 中。 , 不起作用。甚至尝试过 <template *ngIf="car"></template> , 那也不管用....

编辑:我的困惑，像下面这样包装，它做了“某种”工作，意思是，它给出了一个新的错误....

模板:

@Component({
    selector: 'car-detail',
    template: `  
    <h1>Car: {{car?.name}}</h1>
    <hr>
    <button (click)="addBrand()">Add Brand</button>
    <div *ngIf="car">      
      <div *ngFor="let brand of car.getBrands(); let i=index">  
      <h2>Brand {{i+1}}</h2>
      </div>   
    </div>   

Answer 1

你提到 <h1>Car: {{car?.name}}</h1>与 ?但完整的代码示例有 <td>{{car.name}}</td>没有?这将导致错误。

<div *ngFor="let brand of car.getBrands(); let i=index">  

还需要一个 ?避免在 Angular 尝试渲染 View 和 car 时出错尚未设置

<div *ngFor="let brand of car?.getBrands(); let i=index">