Question

我已经检查了几个问题，但它们似乎与我的有点不同。我目前正在创建用户列表，并为每个用户呈现链接。单击该用户后，将进行REST调用，返回用户将能够看到的目录数组。

DatasourceService 如下所示：

  getCatalogs(): Observable<Catalog[]> {
    const api_path = this.dataUrl + `metadata/getcatalogs/name/?user=${this.user.username}&password=${this.user.password}`;
    return this.http.get<Catalog[]>(api_path);
  }

实际上确实会返回正确的数据。

单击用户可以运行此方法：

  onSelect(user: User): void {
    this.selectedUser = user;
    this.datasourceService.user = user; // sets the user, as i can't figure out how to send it as a parameter, and subscribe to that call
    this.datasourceService.getCatalogs() // had to run this here so that the Observable would have at least one subscription to make it run.
      .subscribe(catalogs => {this.catalogs = catalogs; });
  }

我还有一个 CatalogComponent ，如下所示：

@Input() user: User;
  public catalogs$: Observable<Catalog[]>;
  constructor(private datasourceService: DatasourceService) { }

  ngOnInit() {
    this.catalogs$ = this.datasourceService.getCatalogs();
    this.datasourceService.getCatalogs()
      .subscribe(catalogs => {this.catalogs = catalogs; });
  }

呈现如下：

<div *ngIf="user">

  <h3>Catalogs for User: {{user.username}}</h3>


    <ul >
      <li  *ngFor="let catalog of catalogs$ | async">
        {{ catalog.name }}
      </li>
    </ul>

</div>

这只是最新的测试，因为我尝试了几种方法来实现这一点。

我遇到的问题是目录无法列出，并且看起来调用对目录控制器没有任何影响;

认为可能有两个DatasourceServices在运行，我检查一下，它只在 app.module 中声明

  providers: [DatasourceService],

任何有助于此工作的帮助将不胜感激。

Answer 1

所以你出于某种原因订阅了这个可观察的3次，这意味着它会执行3次数据获取，看起来你首先会遇到时间问题。

我怀疑用户永远不会在数据服务上及时设置正确，所以首先，将用户作为参数传递，而不是设置和使用它：

  getCatalogs(user: User): Observable<Catalog[]> {
    const api_path = this.dataUrl + `metadata/getcatalogs/name/?user=${user.username}&password=${user.password}`;
    return this.http.get<Catalog[]>(api_path);
  }

其次，我不确定你的意思是什么意思：

// had to run this here so that the Observable would have at least one subscription to make it run.

这没有意义。您在CatalogComponent中订阅，因此无需订阅两次。只需订阅您需要数据的地方。

目录组件本身非常混乱。您在init上订阅并在组件上设置结果，但是您没有使用该结果，而是使用异步管道重新订阅到单独的流定义。

尝试这样做：

  @Input() user: User;
  public catalogs$: Observable<Catalog[]>;
  constructor(private datasourceService: DatasourceService) { }

  ngOnInit() {
    this.catalogs$ = this.datasourceService.getCatalogs(this.user);
  }

现在你只需设置你的observable并通过异步订阅，不需要再次订阅。

Answer 2

首先考虑Bryan60的答案，简单传递一个参数

二。如果您正在使用＆＃34; child / parent＆＃34;，则必须使用@Input设置来更改数据 - 而不是ngOnInit请参阅https://angular.io/guide/component-interaction#intercept-input-property-changes-with-a-setter

@Input() 
  set user(value)
  {
    this.datasourceService.getCatalogs(value)
      .subscribe(catalogs => {this.catalogs = catalogs; });
  }

Angular：通过控制器订阅服务 - 忽略订阅

2 个答案: