如何在Angular 2的html模板中顯示對象數組？

我正在構建具有3D模型列表的Web應用程序。我正在做這個練習的目的，以獲得角2的一些初步知識。如何在Angular 2的html模板中顯示對象數組？

每個列出的模型，將有名稱，主圖片，類別和滑塊（圖像數組）。

模型數據陣列是：用於進行適當的顯示某些模型的

export var MODELS: Model[] = [{ 
    id: 1, 
    name: 'Model 1', 
    image: 'app/img/models/model-1.jpg', 
    category: 'Cat 1', 
    slides: [ 
    { alt: 'Model 1 front view' , url: 'app/img/models/model-2.jpg' }, 
    { alt: 'Model 1 rear view' , url: 'app/img/models/model-2.jpg' }, 
    { alt: 'Model 1 side view' , url: 'app/img/models/model-2.jpg' } 
    ] 
}, 
{ 
    id: 2, 
    name: 'Model 2', 
    image: 'app/img/models/model-2.jpg', 
    category: 'Cat 2', 
    slides: [ 
    { alt: 'Model 2 front view' , url: 'app/img/models/model-2.jpg' }, 
    { alt: 'Model 2 rear view' , url: 'app/img/models/model-2.jpg' }, 
    { alt: 'Model 2 side view' , url: 'app/img/models/model-2.jpg' } 
    ] 

} 
];

服務是：

@Injectable() 
export class ModelService { 

    getModels(): Promise<Model[]> { 
    return Promise.resolve(MODELS); 
    } 

    getModel(id: number): Promise<Model> { 
    return this.getModels() 
      .then(models => models.find(model => model.id === id)); 
    } 
}

模型細節的頁面模板是：

<div *ngIf="model"> 
    <h2>{{model.name}} details!</h2> 
    <img [src]="model.image" alt="{{model.name}}"/> 
    <div>{{model.slides}}</div> 
</div>

這些是主要是我用過的東西：https://angular.io/docs/ts/latest/tutorial/

但是，當我嘗試使用最簡單的方式將幻燈片數組顯示到模型詳細信息頁面時，它顯示[object Object]。我讀到這可能是角度2中的一個常見問題，可以通過使用自定義管道來解決。不幸的是，我不知道如何爲這個案例寫一篇文章。

一般問題將是：如何在html模板上正確顯示對象（幻燈片）的數組，並將它們分別包裝到img標記中。

這裏是plunker例如鏈接：http://plnkr.co/edit/HVo3dtGprMHsPYeyRWBR?p=preview

由於提前，

來源

2016-11-01 gundra

那是因爲你的slides財產實際上是一個Object，它是如此的顯示屬性單獨將只顯示「對象」的數組。你需要做的是遍歷幻燈片財產，分別創建IMG的div：

<img *ngFor="let slide of model.slides" [alt]="slide.alt" [src]="slide.url" />

這是你更新的模板是什麼樣子從你plunkr：

<ul class="models"> 
     <li *ngFor="let model of models" (click)="gotoDetail(model)"> 
     <img *ngFor="let slide of model.slides" [src]="slide.url"/> 
     {{model.name}},{{model.category}} 
     </li> 
    </ul>

來源

2016-11-01 23:04:47

感謝您的回答Syntactic，它真的不再顯示[object Object]，而是寫入「slide.alt slide.alt slide.alt」，也不能顯示任何圖像url。我應該做更多的事嗎？ – gundra

即使在您的本地機器上？它不會在plunkr上顯示和顯示圖像，因爲你沒有它們，如果你使用我在編輯中粘貼的代碼，它應該在你的本地機器上工作，所以讓我知道它是不是 –

Syntactic，this last代碼片段適用於模型頁面，但是我需要它在模型詳細信息頁面上，當我嘗試將其應用於此時，應用程序中斷 – gundra

你可以使用* ngFor在一個img標籤我已經包含了一些我的練習代碼來向你展示我的意思。

<div class="col-md-6" *ngFor="let picture of imageUrl; let i = index; trackBy: trackByFn"> 
        <div class="portfolio-item" 
         style="padding-bottom: 10px;"> 
         <a (click)="galleryOpen = false;componentIndex = i;" data-toggle="dropdown" href="#" name="gal2"> 
          <img class="img-portfolio img-responsive" src={{picture}} height="350" width="455" 
           style="height: 350px; max-width: 455px;"> 
         </a> 
        </div> 
       </div>

在這種情況下* ngFor可以很容易地放在img標籤中。我希望這能夠幫到你。

來源

2016-11-01 23:05:24 TyAnthoney

謝謝T.Morrell對這個問題的貢獻。稍後會檢查這個代碼，只是爲了看看是否適合我的特定情況。 – gundra

如何在Angular 2的html模板中顯示對象數組？

回答

相關問題