将第一项订阅数据传递给服务

Question

我正在开发 angular 需要应用以下机制的应用程序：

我的视图有 2 个部分（项目列表和详细信息，如果 selected 项目）。用户可以单击某个项目，下一个服务会获取该项目的其他数据并在详细视图中显示它们。我还希望 select 第一项在可用时自动启动。

这是我的服务：

@Injectable()
export class ItemService {

  private url: string;
  private itemSource = new BehaviorSubject<Item>(null);
  selectedItem = this.itemSource.asObservable();

  constructor(private http: HttpClient) {
    this.url = 'http://localhost:8080/api/item';
  }

  getItems(): Observable<Item[]> {
    let observable = this.http.get<Item[]>(this.url)
      .map(items => items.map(item => {
        return new Item(item);
      }));
    return observable;
  }

  selectItem(item: Item) {
    return this.http.get<Item>(this.url + '/' + item.id)
      .map(item => new Item(item))
      .subscribe(t => this.itemSource.next(t));
  }
}

在详细组件中，我正在订阅 selected 项目，如下所示：

  ngOnInit() {
    this.itemService.selectedItem.subscribe(item => this.selectedItem = item);
  }

以下代码来自我显示项目列表的组件。我还想在订阅数据后设置 selected 项目，但我的代码不起作用。我在 html 模板中迭代 items[] 属性并显示数据，但是当我在订阅数据后访问此数组时，我得到了未定义的信息。你能修复我的代码吗？谢谢！

  public items = [];

  constructor(private itemService: ItemService) { }

  ngOnInit() {
    this.itemService.getItems()
      .subscribe(
        data => this.items = data,
        err => console.log(err),
        function () {
          console.log('selected data', this.items); // this prints undefined
          if (this.items && this.items.length) {
            this.itemService.selectedItem(this.items[0])
          }
        });
  }

Answer 1

您的问题是您在调用 subscribe 时没有为 complete 回调使用箭头函数。如您所见，您正在为 next 和 error.

使用箭头函数

当您使用 function(...) {...} 定义一个新函数时，您正在创建一个新的上下文，因此 this 关键字改变了它的含义。箭头函数和普通函数之间的区别（除了更优雅，在我看来），箭头函数没有为 this 定义新的上下文，因此该关键字的含义与上下文中的含义相同他们被定义。因此，在您的 next 和 error 回调中，this 是您的组件，但在您对 complete 的调用中，this 无疑是对window，没有 items 属性，因此 undefined。

将您的代码更改为：

public items = [];

constructor(private itemService: ItemService) { }

ngOnInit() {
  this.itemService.getItems()
  .subscribe(
    data => this.items = data,
    err => console.log(err),
    () => {
      console.log('selected data', this.items); // this prints undefined
      if (this.items && this.items.length) {
        this.itemService.selectedItem(this.items[0])
      }
    });
}

我想你在那里使用了 function 关键字，因为该函数没有参数，但你可以用语法 () => expression 或 () => {...}

来表达它

data => this.items = data，毕竟是更简洁优雅的写法

(data) => { return this.items = data; }

将第一项订阅数据传递给服务

Pass first item of subscribed data to service

javascript

rxjs

typescript

angular

angular-observable