当我在ngFor中将数组名称写在方括号中时有什么区别?

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)];
}
}

我为组件产品列表编写了以下代码：

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

请注意，当我像这样编写数组名称产品列表时：[产品列表]。浏览器显示输出为

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

但是当我简单地写产品列表(不带方括号(时，浏览器返回：

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

对此有什么解释吗？

我引用了一本名为ng-book2的书来学习angular2，这个例子取自书本身。

谢谢:)

编辑：

我观察到在使用 [产品列表] 时无法读取属性的值 例如，当我使用方括号时，{{product.name}} 没有显示。 但是当我用ngFor编写简单的产品列表时，它会显示名称

Answer 1

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

当您插入此数组的项目时，它将被字符串化为字符串

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

而如果您只使用productList那么角度将迭代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' }]"