Question

我正在学习角度2，我正在尝试编写ngFor语句。当我通过输入传递数据时，我在模板中访问了该输入，如下所示：我的主要组成部分（我使用产品列表将产品列表输入产品列表组件传递产品）

@Component({
    selector: 'inventory-app',
    template: `
    <div class="inventory-app">
   <product-list [productList] = "products" 
   (OnProductSelected) = "productWasSelected($event)">

   </product-list>
    </div>
    `,
    directives: [ProductList]
})
class InventoryComponent {
    products: Array<Product>
    constructor() {
        this.products = [new Product('NICEHAT'
            , 'A nice Hat'
            , '/resources/images/products/black-hat.jpg'
            , ['Men', 'Accessories', 'Hats']
            , 29.99),
        new Product('BLACKHAT'
            , 'A nice Black Hat'
            , '/resources/images/products/black-hat.jpg'
            , ['Men', 'Accessories', 'Hats']
            , 29.99)];
    }
}

我为组件ProductList编写了以下代码：

@Component({
    selector: `product-list`,
    inputs: [`productList`],
    template: `<div *ngFor = "#product of [productList]">{{product}}</div>`
})

class ProductList {

}

注意，当我写这样的数组名称productList时：[productList]。浏览器显示输出为

[object Object],[object Object],[object Object]

但是当我写简单的productList（没有方括号）时，浏览器返回了：

[object Object]  
[object Object]  
[object Object]

对此有任何解释吗？

我正在推荐一本名为Go Playground的书来学习angular2，这个例子取自本书。

谢谢：）

修改

我发现当我使用[productList]时我无法读取属性的值例如当我使用方括号时，{{product.name}}没有显示。但是当我在ngFor

中编写简单的productList时，它会显示名称

Answer 1

[productList]表示您正在创建数组数组

当你插入这个数组的项目时，它将被字符串化为字符串

[object Object],[object Object],[object Object]

如果你只使用productList，那么angular会迭代productList中的每个项目。由于你的数组有3个项目，它将呈现3个div元素

假设你有

productList = [{ name: 'name 1' }, { name: 'name 2' }]

在第一种情况下，当你使用方形breacers时，它可以写成如下：

*ngFor = "let product of [[{ name: 'name 1' }, { name: 'name 2' }]]"

而在第二种情况下

*ngFor = "let product of [{ name: 'name 1' }, { name: 'name 2' }]"

在ngFor中用方括号编写数组名称有什么区别？

1 个答案: