typescript - HTTP i ugniježđeni objekti (Angular2 RC1 + TS)

Imam problema s prikazivanjem svojih podataka u pregledniku. Da bih objasnio svoj problem, koristim neki primjer koda. Imam neke ugniježdene objekte koji uzrokuju moj problem. Ovdje ću prikazati jedan ugniježđeni objekt kako bih demonstrirao svoj problem.

Prije svega, ja radim HTTP pozive samo za objekt Automobil. Dakle, saveCar također djeluje kao ažuriranje automobila, ovisno o tome što korisnik radi u aplikaciji. Sve metode u servisu rade kako trebaju.

Dakle, moja usluga izgleda otprilike ovako:

@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...       
    }    
}

Zatim imam klasu Car, gdje dolazi do izražaja ugniježđeni objekt "Brand", Brand zatim ima svoju klasu, ali ja ću je izostaviti.

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

Zatim imam komponentu-popis koja prikazuje sve automobile, to radi kako treba!

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

}

Problem koji imam je u komponenti detalja, gdje korisnik biva preusmjeren nakon što klikne na određeni automobil. Usmjeravanje i dohvaćanje automobila iz baze podataka funkcionira kako treba. To znam, jer ako uklonim cijeli predložak osim <h1>Automobil: {{car?.name}}</h1>, ime se ispravno ispisuje koristeći Elvis operator.

Ali moj detail-component izgleda otprilike ovako:

@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
}

Dakle, u mom detaljskom komponentu pozivam sve metode ovako: car.someMethod() i dalje za ugniježđeni objekt Brand ovako: brand.someMethod() u predlošku. Dakle, greška se javlja prilikom poziva metode, npr. u predlošku 'cannot get getBrands of undefined'. Pokušao sam staviti Elvis operator ovako: car?.getBrands(). Ne radi. Pokušao sam omotati cijelu stvar u div, i s Elvis operatorom i s <div *ngIf="car"></div>, ne radi. Čak sam pokušao s <template *ngIf="car"></template>, pa ni to ne radi....

Uredi: moja pogreška, umotavanje kao dolje, to 'uglavnom' radi, znači, daje novu pogrešku....

Predložak :

@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>   

Odgovor #1

Spominjete <h1>Car: {{car?.name}}</h1> s ?, ali cijeli primjer koda ima <td>{{car.name}}</td> bez ?, što će uzrokovati grešku.

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

također treba ? kako bi se izbjegle pogreške kada Angular pokuša prikazati prikaz, a car još nije postavljen

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