Angular：嵌套* ngFor內的服務不起作用

Question

我試過跟隨方法，但由於某種原因我不能在ngFor中使用服務。 http請求調用太多了。 除了bilanz之外，內部ngFor不會顯示任何內容。

<div *ngFor="let bilanz of $bilanz | async">
  <input type="checkbox" name="land" (change)="checkFilter($event)" value="{{bilanz.LAND}}" />{{bilanz.LAND}}<br />
  <div *ngFor="let b of stadtService.getBilanz([{land: bilanz.LAND}]) | async" class="stadt">
      <input type="checkbox" name="stadt" (change)="checkFilter($event)" value="b.STADT" />{{b.STADT}}<br />
</div>
</div>

在我的FilterComponent中，我添加了以下行：

  ngOnInit() {
    this.$bilanz = this.laenderService.getBilanz();
  }

我的laenderBilanz如下。 stadtBilanz是類似的：

  // GET
  public getBilanz(options=undefined): Observable<Bilanz[]> {
      const httpOptions = {
          headers: new HttpHeaders({
              'Content-Type': 'application/json',

          }),
      };
      var url = `${this.serverUrl}/bilanz/laender`;
      if(options!=undefined) {
          for(var i=0; i<options.length; i++) {
          var object = options[i];
          console.log(object);
            for (var property in object) {
                if (object.hasOwnProperty(property)) {
                    if(i==0) {
                        url+="?"+property+"[]="+object[property];
                    } else {
                        url+="&"+property+"[]="+object[property];
                    }
                }
            }
          }
      }

      console.log(url);
      return this._http.get<Bilanz[]>(url, httpOptions);
  }

StadtService：

 // GET
  public getBilanz(options=undefined, ascending=undefined): Observable<Any[]> {
      const httpOptions = {
          headers: new HttpHeaders({
              'Content-Type': 'application/json',

          }),
      };
      var url = `${this.serverUrl}/bilanz/stadt`;

      if(options!=undefined) {
          for(var i=0; i<options.length; i++) {
          var object = options[i];
          console.log(object);
          var s = 0;
            for (var property in object) {
                if (object.hasOwnProperty(property)) {
                    if((i==0)&&(s==0)) {
                        url+="?"+property+"[]="+object[property];
                    } else {
                        url+="&"+property+"[]="+object[property];
                    }
                }
                s++;
            }
          }
      }

      if(ascending!=undefined) {
        url+="?ascending="+ascending;
      }
      console.log(url);
      return this._http.get<Bilanz[]>(url, httpOptions);
  }

如果有必要，我也可以提供rest-api。

Answer 1

我相信你的問題在這里

stadtService.getBilanz([{land: bilanz.LAND}])

這是工作測試你添加stadtService不知道為什么

Answer 2

您的*ngFor和async管道的實現看起來是正確的。

我認為你應該驗證你的url和httpOptions

return this._http.get<Bilanz[]>(url, httpOptions); // Make sure you get a valid response

演示： https ： //stackblitz.com/edit/angular-hgiz5k