当我在 ngFor 的方括号中写数组名时有什么区别？

Question

我正在学习 angular 2，我正在尝试编写 ngFor 语句。当我通过输入传递数据时，我在模板中访问了该输入，如下所示：我的主要组件（我使用 productList 输入将 products 传递给 ProductList 组件）

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

有什么解释吗？

我正在参考一本名为 ng-book2 的书来学习 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' }]

第一种情况，当你使用square breacers时，可以这样写：

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

而在第二种情况下

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

当我在 ngFor 的方括号中写数组名时有什么区别？

What is difference when I write array name in square brackets in ngFor?

angular2-template

ngfor

angular2-components

angular