HTTP und verschachtelte Objekte (Angular2 RC1 + TS)

Question

Ich habe Probleme, meine Daten im Browser anzuzeigen. Um mein Problem zu erklären, verwende ich Dummy-Code. Ich habe einige verschachtelte Objekte, die mein Problem verursachen. Hier zeige ich ein verschachteltes Objekt an, um mein Problem zu zeigen.

Zuerst mache ich nur HTTP-Aufrufe für das Auto-Objekt. So verhält sich saveCar wie eine Aktualisierung des Autos, je nachdem, was der Nutzer in der App macht. Alle Methoden im Service funktionieren so, wie sie sollten.

So sieht mein Service etwas wie folgt aus:

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

Dann habe ich eine Car-Klasse, wo das verschachtelte Objekt „Brand“ zu spielen kommt, Marke dann hat es eine eigene Klasse, aber ich werde Lass es aus.

Dann habe ich eine Liste-Komponente, die alle Autos auflistet, das funktioniert so, wie es sollte!

Das Problem, das ich habe, ist in der Detail-Komponente, wo der Benutzer nach dem Klicken auf ein bestimmtes Auto navigiert wird. Das Routing und Abrufen des Autos aus der db funktioniert wie es sollte. Das weiß ich, denn wenn ich die ganze Vorlage außer <h1>Car: {{car?.name}}</h1> entferne, wird der Name gut mit dem elvis-Operator ausgedruckt.

Aber meine Detail-Komponente sieht ungefähr so ​​aus:

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

Also in meinem Detail Komponente nenne ich alle Methoden wie: car.someMethod() und weiter auf dem verschachtelten Marke Objekt wie: brand.someMethod() in der Vorlage. So kommt der Fehler beim Aufruf der Methode, zum Beispiel in der Vorlage 'cannot get getBrands of undefined' Ich habe versucht, den elvis-Operator wie folgt zu setzen: car?.getBrands() Es funktioniert nicht. Ich habe versucht, die ganze Sache in ein Div wickeln, sowohl mit Elvis-Operator und <div *ngIf = "car"></div>, funktioniert nicht. Sogar versucht mit <template *ngIf="car"></template>, gut, das funktioniert auch nicht ....

Edit: mein Chaos-up, wie unten verpackt, tut es "Art" Arbeit, das heißt, es gibt einen neuen Fehler ....

Vorlage:

@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

Sie erwähnen <h1>Car: {{car?.name}}</h1> mit ? aber die vollständige Codebeispiel hat <td>{{car.name}}</td> ohne ?, die einen Fehler verursachen.

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

braucht auch eine ? Fehler zu vermeiden, wenn Angular versucht, die Ansicht zu machen und car noch nicht gesetzt ist

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