當我在ngFor的方括號中寫入數組名稱時有什麼不同？

我正在學習angular 2，並且正在嘗試編寫ngFor語句。當我通過輸入傳送的數據我訪問的輸入我的模板如下：我的主要成分當我在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]

有沒有做任何解釋？

我在引用一本名爲ng-book2的書來學習angular2，這個例子已經從書中取得了。

謝謝:)

編輯：

我觀察到，當我用我不能讀取屬性的值[productList的] 例如{{product.name}}在我使用方括號時沒有顯示。但它顯示的名字，當我在ngFor

來源

2017-08-04 Dhananjay Sakhare

[productList]編寫簡單productList的意思是你要創建陣列

的數組當你插值這個數組的項目將字符串化字符串

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

雖然如果您只是使用productList，那麼角將迭代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' }]"

來源

2017-08-04 09:08:39 yurzui

太棒了！這就說得通了。 –

當我在ngFor的方括號中寫入數組名稱時有什麼不同？

回答

相關問題