1

3d モデルのリストを持つ Web アプリを構築しています。angular 2の初期知識を得るために、練習目的でこれを行っています。

リストされた各モデルには、名前、メイン画像、カテゴリ、およびスライダー (画像の配列) があります。

モデル データ配列は次のとおりです。

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] が表示されます。これはangular 2の一般​​的な問題である可能性があり、カスタムパイプを使用して解決できることを読みました。残念ながら、この特定のケースでどのように書くかはわかりません。

一般的な質問は次のとおりです: html テンプレートにオブジェクト (スライド) の配列を適切に表示し、それらを個別にimgタグにラップする方法。

プランカーの例のリンクは次のとおりです: http://plnkr.co/edit/HVo3dtGprMHsPYeyRWBR?p=preview

前もって感謝します、

4

2 に答える 2

6

これは、slidesプロパティが実際には でありObject、配列であるため、プロパティのみを表示すると単に「オブジェクト」が表示されるためです。あなたがする必要があるのは、slides プロパティを繰り返し処理し、個別に 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-01T23:04:47.557 に答える
1

img タグで *ngFor を使用することができます。私が何を意味するかを示すために、私の実践コードをいくつか含めました。

<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-01T23:05:24.743 に答える