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

【问题标题】：What is difference when I write array name in square brackets in ngFor?当我在 ngFor 的方括号中写数组名时有什么区别？
【发布时间】：2018-01-12 03:27:17
【问题描述】：

我正在学习 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 时它会显示名称

【问题讨论】：

标签： angular angular2-template ngfor angular2-components

【解决方案1】：

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

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

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

如果您只使用productList，那么 Angular 将遍历 productList 中的每个项目。由于您的数组有 3 个项目，因此它将呈现 3 个 div 元素

假设你有

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

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

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

在第二种情况下

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

【讨论】：

太棒了！这是有道理的。