Угловая привязка свойств 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> 

Странным является то, что связывание свойства дисплея не отображается, но это в JSON вид:

fax-list works! 

Current Queue: 

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

Вот важные части faxservice:

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'