Question

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

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

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

Microsoft R Open 3.2.5
Default CRAN mirror snapshot taken on 2016-05-01
The enhanced R distribution from Microsoft
Visit https://mran.microsoft.com/ for information
about additional features.

Multithreaded BLAS/LAPACK libraries detected. Using 4 cores for math algorithms.

> getwd()
[1] "E:/MRO/R-3.2.5/bin/x64"
> install.packages("/Dropbox/jobs/Warwick_Girolami/SERRS/serrs/code/serrsBayes_0.1-25.tar.gz", type="source")
Installing package into ‘D:/Users/Matthew/Documents/R/win-library/3.2’
(as ‘lib’ is unspecified)
inferring 'repos = NULL' from 'pkgs'
* installing *source* package 'serrsBayes' ...
** libs
g++ -m64 -I"E:/MRO/R-3.2.5/include" -DNDEBUG    -I"D:/Users/Matthew/Documents/R/win-library/3.2/Rcpp/include" -I"D:/Users/Matthew/Documents/R/win-library/3.2/RcppEigen/include" -I"c:/applications/extsoft/include"  -fopenmp   -O2 -Wall  -mtune=core2 -c RcppExports.cpp -o RcppExports.o
g++ -m64 -I"E:/MRO/R-3.2.5/include" -DNDEBUG    -I"D:/Users/Matthew/Documents/R/win-library/3.2/Rcpp/include" -I"D:/Users/Matthew/Documents/R/win-library/3.2/RcppEigen/include" -I"c:/applications/extsoft/include"  -fopenmp   -O2 -Wall  -mtune=core2 -c mixLorentz.cpp -o mixLorentz.o
mixLorentz.cpp: In function 'Eigen::ArrayXi resampleParticles(Rcpp::NumericVector, Rcpp::NumericMatrix, Rcpp::NumericMatrix, Rcpp::NumericMatrix, Rcpp::NumericVector, int, int)':
mixLorentz.cpp:229:18: warning: unused variable 't1' [-Wunused-variable]
mixLorentz.cpp:229:21: warning: unused variable 't2' [-Wunused-variable]
mixLorentz.cpp: In function 'long int marginalMetropolisUpdate(Eigen::MatrixXd, unsigned int, Eigen::VectorXd, Eigen::VectorXd, Eigen::VectorXd, Rcpp::NumericMatrix, Rcpp::NumericMatrix, Rcpp::NumericVector, Rcpp::NumericMatrix, Rcpp::NumericVector, Eigen::VectorXd, Rcpp::List)':
mixLorentz.cpp:437:23: warning: comparison between signed and unsigned integer expressions [-Wsign-compare]
mixLorentz.cpp:458:23: warning: comparison between signed and unsigned integer expressions [-Wsign-compare]
mixLorentz.cpp:525:25: warning: comparison between signed and unsigned integer expressions [-Wsign-compare]
mixLorentz.cpp:374:10: warning: unused variable 'priorScaleMu' [-Wunused-variable]
mixLorentz.cpp:375:10: warning: unused variable 'priorScaleSD' [-Wunused-variable]
g++ -m64 -shared -s -static-libgcc -o serrsBayes.dll tmp.def RcppExports.o mixLorentz.o -fopenmp -Lc:/applications/extsoft/lib/x64 -Lc:/applications/extsoft/lib -LE:/MRO/R-3.2.5/bin/x64 -lR
installing to D:/Users/Matthew/Documents/R/win-library/3.2/serrsBayes/libs/x64
** R
** preparing package for lazy loading
** help
*** installing help indices
** building package indices
** testing if installed package can be loaded
* DONE (serrsBayes)
> library(serrsBayes)
Loading required package: Matrix

然后我有一个Car-class，嵌套对象“Brand”进来玩，Brand然后拥有它自己的类，但我会把它留下来。

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

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

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

我遇到的问题是在详细信息组件中，用户在点击特定汽车后进行导航。从数据库中路由和检索Car可以正常工作。我知道，因为如果我删除除@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]); } }之外的所有模板，那么elvis运算符就会打印出名称。

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

<h1>Car: {{car?.name}}</h1>

因此，在我的详细信息组件中，我将所有方法调用为：@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 }，并进一步调用嵌套的Brand对象，例如模板中的car.someMethod()。所以错误来自于方法的调用，例如在模板brand.someMethod()中我尝试将elvis运算符放在这样：'cannot get getBrands of undefined'它不起作用。我试图用elvis运算符和car?.getBrands()将整个事物包装在div中，但是不起作用。即使尝试使用<div *ngIf = "car"></div>，这也无效......

编辑：我的搞砸了，像下面这样包装，它确实“有点”工作，意思是，它给出了一个新的错误....

模板：

<template *ngIf="car"></template>

Answer 1

您使用<h1>Car: {{car?.name}}</h1>提及?，但完整代码示例的<td>{{car.name}}</td>没有?，这会导致错误。

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

当Angular尝试渲染视图并且?尚未设置时，

还需要car以避免错误

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

HTTP和嵌套对象（Angular2 RC1 + TS）

1 个答案: