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

以下是传真服务的重要部分：

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'

Angular 2属性绑定。有点工作

1 个答案: