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

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="..."/>

或者使用安全的naivgation运算符＆＃39;？＆＃39;

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

Answer 2

好的，我已经在这里找到了问题。

在我得到它之后，对象变成了一个数组，因此我需要在HTML中访问数组的索引时放置[0]。代码看起来像这样。

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