角2のプロパティ結合。 Kinda working

Question

非常に古いものに新しいものを使うのはクールだと思いました。だから私はAngular 2を使ってSharepointのファックスキューを管理します。私は時間があるので、今はおなじみにすることを学んでいます。とにかく、

アプリは最初にキューのリストを表示し、それをクリックするとそのキューにあるファックスが表示されます。今のところ、タイトルを表示したいだけです。簡単に、私は思った。ここで

はFaxListComponentです：

export class FaxListComponent implements OnInit { 

    public faxqueue: FaxQueue; 
    private sub: any; 

    constructor(private _faxService: FaxService, private _route: ActivatedRoute) { } 

    ngOnInit() { 
    this.sub = this._route.params.subscribe(params => { 
     let queuename = params['id']; 
     console.log('Queue: ' + queuename); 
     this._faxService.getFaxQueueByName(queuename) 
     .subscribe(queue => this.faxqueue = queue); 
    }); 
    } 
} 

そしてビューはちょうどである：

<p> 
    fax-list works! 
</p> 
<p *ngIf="faxqueue"> 
    Current Queue: {{faxqueue.Display}}<br/><br/> 
    {{faxqueue | json}} 
</p> 

奇妙なことは、Displayプロパティのバインディングが表示されないということですが、それはJSONにあります表示：

fax-list works! 

Current Queue: 

[ { "Id": 2, "Display": "East", "Name": "Incoming Fax East", "Url": "/casefile/Incoming%20Fax%20East/" } ] 

ここに、FAXサービスの重要な部分があります。

export class FaxQueue { 
    Id: number; 
    Display: string; 
    Name: string; 
    Url: string; 
} 

getFaxQueues() { 
    return this._http.get('app/shared/faxqueues.json.txt') 
     .map((response: Response) => <FaxQueue[]>response.json().data) 
     // .do(data => console.log(data)) 
     .catch(
     function (error: Response) { 
      console.error(error); 
      return Observable.throw(error.json().error || 'Server error'); 
     } 
    ); 
    } 

getFaxQueueByName(queuename: string) { 
    return this._http.get('app/shared/faxqueues.json.txt') 
     .map((response: Response) => (<FaxQueue[]>response.json().data).filter(queue => queue.Display === queuename)) 
     // .do(data => console.log('data:' + data)) 
     .catch(
     function (error: Response) { 
      console.error(error); 
      return Observable.throw(error.json().error || 'Server error'); 
     } 
    ); 
    } 

Answer 1

ファクシミリキューは、オブジェクトではなくアレイ状のものである可能性はありますか？

getFaxQueueByNameは.map.filterの結果を返すので、結果は引き続き配列のようなものになります。

あなただけの最初の値をしたい場合は、あなたのコードの残りの部分に応じて、

.first().subscribe(queue => this.faxqueue = queue) 

してみてください、あなたはとてもように（あなたのモジュールの上部の周りに）最初のオペレータをインポートする必要がある場合があります

import 'rxjs/add/operator/first'