未定义的对象，但我在控制台日志中得到了一些东西

Question

我正在尝试访问 product.img_url，但错误告诉我它未定义。当我尝试使用控制台日志时，它清楚地表明我的产品对象有一个值。谁能帮我解决这个问题？

product.component.ts

export class ProductComponent implements OnInit{
    product: Products;

    constructor(private _router: Router, private _productsService: ProductsService){}

    ngOnInit(){
        var str = this._router.url;
        var param = str.split("/");
        this._productsService.getProductById(param[2], param[3])
            .subscribe((product) => {this.product = product; console.log(product);}),
            (err) => console.log(err);
    }

}

HTML div

            <div class="tab-content">
                <div class="tab-pane active" id="product-page1" [hidden]="product">
                    <img src="{{product.img_url}}" alt="..."/>
                </div>
            </div>

错误堆栈跟踪

console.log输出

Answer 1

如果产品可以在绑定点未定义，在这种情况下有两种选择。

您可以使用 ngIf 仅在产品存在时呈现 img 元素。

 <img *ngIf="product" src="{{product.img_url}}" alt="..."/>

或使用安全导航运算符“?”

<img src="{{product?.img_url}}" alt="..."/>

Answer 2

好的，我已经发现这里的问题了。

对象拿到后变成了数组，所以访问HTML中的数组索引时需要放[0]。代码如下所示。

<img src="{{product[0].img_url}}" alt="..."/>

未定义的对象，但我在控制台日志中得到了一些东西

Undefined Object but I got something in console log

html

json

angular

angular2-services