Angular2、detail.component.tsのコードがメインアプリケーションに表示されなくなった

Question

Angular2を学びたいと思っています。https://angular.ioのチュートリアルに従っていますが、もう少しカスタムを作成しようとしていますが、基本、画像をクリックすると大きな画像が表示されます。 私はこの時点でhttps://angular.io/docs/ts/latest/tutorial/toh-pt3.htmlに行きました。ここでは、基本的に正しいファイル構造を設定していますが、app.component.tsのすべてが正しく動作していたコードは半分しか働いていません。 これは私がapp.component.ts

import { Component } from '@angular/core'; 

import { Flickr } from './flickr'; 

const Flickres: Flickr[] = [ 
    { id: 11, url: 'https://c1.staticflickr.com/9/8501/8300920648_d4a21bba59_n.jpg', urlxl: 'https://c1.staticflickr.com/9/8501/8300920648_56ce4fb10f_k.jpg' }, 
    { id: 12, url: 'https://c1.staticflickr.com/2/1558/26017368400_dc45fbb364_n.jpg', urlxl: 'https://c1.staticflickr.com/2/1558/26017368400_41dff31fbc_k.jpg' }, 
    { id: 13, url: 'https://c5.staticflickr.com/4/3781/10901734724_ab15461d13_n.jpg', urlxl: 'https://c5.staticflickr.com/4/3781/10901734724_94ed12297a_k.jpg' }, 
    { id: 14, url: 'https://c8.staticflickr.com/9/8486/8203155911_f29b9bf344_n.jpg', urlxl: 'https://c8.staticflickr.com/9/8486/8203155911_f29b9bf344_c.jpg' } 
]; 

@Component({ 
    selector: 'my-app', 
    template: ` 
     <h1>{{title}}</h1> 
     <h2>My flickres</h2> 
     <ul class="flickres" > 
      <li *ngFor="let flickr of flickres" [class.selected]="flickr === selectedFlickr" 
      (click)="onSelect(flickr)"> 
      <img src="{{flickr.url}}"/> 
      </li> 
     </ul> 
     <my-flickr-detail [flickr]="selectedFlickr"> 

     </my-flickr-detail> 
    `, 
    styles: [` 
     .flickres { 
      padding: 0; 
     } 
     .flickres li { 
      list-style:none; 
      display: inline-block; 
      width: 25%; 
     } 
     .flickres li img { 
      width: 100%; 
     } 
     .xl { 
      width: 100%; 
     } 
     .selected { 
      opacity: 0.5; 
     } 
    `], 
}) 

export class AppComponent { 
    title = 'Flickr images'; 
    flickres = Flickres; 
    selectedFlickr: Flickr; 
    onSelect(flickr: Flickr): void { 
     this.selectedFlickr = flickr; 
     console.log(Flickr) 
    } 
} 

に今持っているものであり、これは私のflickr-detail.component.tsである

urlxlとコードONSELECT（上の基本的

import { Component, Input } from '@angular/core'; 

import { Flickr } from './flickr'; 

@Component({ 
    selector: 'my-flickr-detail', 
    template: ` 
     <div *ngIf="flickr" > 
      <img class="xl" src="{{flickr.urlxl}}" /> 
     </div> 
    `, 
}) 

export class FlickrDetailComponent { 
    @Input() 
    flickr: Flickr; 
} 

より大きなイメージ）は、私のflickr-detailの中のコードにもう出力されなくなっています。そして、Angularを初めて使うことによって、私は私が理解できない非常にばかげたミスのように思えます。

ご協力いただきありがとうございます。

Answer 1

私にはうまく動作します。 Here it's a working plunker：http://plnkr.co/edit/8n8QXC2JJvAzrbBJuMjO?p=preview

このような将来の質問については、常にプランナーの例を作成するので、他のユーザーは簡単にあなたのアプリを見て、修正を投稿することができます。