Angular 2屬性綁定。有點工作

我認爲在非常古老的東西上使用非常新的東西會很酷。所以我打算使用Angular 2來管理Sharepoint中的傳真隊列。我有很多時間，所以我現在只是學習熟悉。無論如何，Angular 2屬性綁定。有點工作

該應用程序首先顯示一個隊列列表，當你點擊一個，將顯示該隊列中的傳真。現在，我只想顯示標題。很簡單，我想。

這裏的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/" } ]

以下是傳真服務的重要部分：

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'); 
     } 
    ); 
    }

來源

2016-07-26 KenLin

傳真隊列是否可能是類似數組而不是對象的可觀察對象？

因爲getFaxQueueByName返回.map.filter的結果，結果仍然是類似數組的可觀察值。

如果你只是想的第一個值，嘗試用

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

根據您的代碼的其餘部分，你可能不得不進口第一運營商（在你的模塊的頂部），像這樣：

import 'rxjs/add/operator/first'

來源

2016-07-26 20:00:01

不要這樣。這是來自FaxService： 'export class FaxQueue {' 'Id：number;' Display：string; 名稱：string; Url：string; } 和 getFaxQueues（）{ 返回this._http.get（ '應用程序/共享/ faxqueues.json'） .MAP（（響應：響應）=> response.json（）數據） // data（data => console.log（data）））; } – KenLin

那麼這看起來很糟糕 – KenLin

是的，它確實;）可能想編輯你的原始問題呢？無論哪種方式，你的管道JSON的結果似乎顯示一個單一的對象作爲其元素之一的數組。您是否想嘗試使用{{faxqueue.length}}而不是{{faxqueue.Display}}進行確認？ –

Angular 2屬性綁定。有點工作

回答

相關問題