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

我相信您在这里遇到的问题

    [
      {
        "edges": [
          {
            "_from": "entities/198593",
            "_key": "391330",
            "_to": "entities/198603",
            "type": 300
          },
          {
            "_from": "entities/198593",
            "_key": "391390",
            "_to": "entities/198477",
            "type": 110
          },
          ...
        ],
        "vertices": [
          { "_key": "198603", "name": "A" },
          { "_key": "198477", "name": "B" },
          ...
        ]
      }
    ]

这里工作正常test，您要添加stadtService.getBilanz([{land: bilanz.LAND}])不确定原因

Answer 2

您的*ngFor和异步管道的实现看起来正确。

我认为您应该验证您的url和httpOptions

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

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

Angular：嵌套* ngFor内的服务不起作用

2 个答案: