Question

Angular的新手因此努力确定此问题的根本原因。我需要创建一个POC仪表板，其中UI是从客户端的sharepoint站点提取的数据构建的 - 使用httpclient调用SP rest api。决定在SP最终确定时使用json-server作为提供者，但我似乎无法获得所需的输出。很确定这将是我不知道的非常基本的东西。

// *** dashboard.component.ts

import { Component, OnInit } from "@angular/core";
import { DashboardService } from "./dashboard.service";
import { StrategicItem  } from "../../model/StrategicItem";
import { Observable } from "rxjs/Observable";

@Component({
   selector: "app-dashboard",
   templateUrl: "./dashboard.component.html",
   styleUrls: ["./dashboard.component.css"], 
   providers: [DashboardService]
 })

export class DashboardComponent implements OnInit
 {
 private strategicItems: Observable<StrategicItem[]>;
 constructor(private dashboardService: DashboardService){}

 ngOnInit()
    {
    this.getStrategicItems();
    }

 getStrategicItems(): void
    {
    this.strategicItems = this.dashboardService.getStrategicItems();
    }
 }

// *** dashboard.service.ts

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import {StrategicItem } from "../../model/StrategicItem";
import { Observable } from "rxjs/Observable";


@Injectable()
export class DashboardService {
    private readonly safeUrl: string = "http://localhost:8900/safe"; 

    constructor(private httpClient: HttpClient) {}

    getStrategicItems(): Observable<StrategicItem[]>
      {
      return this.httpClient.get<StrategicItem[]>(this.safeUrl);
      }
}

问题出在布局的ngFor部分，我想迭代列表并填充UI

// *** dashboard.component.html

...
<mat-card>
   <mat-card-header class="slate">
      <mat-card-title>Leading Indicators</mat-card-title>
   </mat-card-header>
   <mat-list>
      <mat-list-item *ngFor="let item of strategicItems | async">
         <mat-icon>chevron_right</mat-icon><a href="">{{item.title}}</a>
      </mat-list-item>
   </mat-list>
</mat-card>
...

// *** db.json

{
"safe": [
    { "title": "Work Safety Controls System" },
    { "title": "Incident Management" },
    { "title": "Safety Critical Element Performance" },
    { "title": "Management of Change" },
    { "title": "Emergency Preparedness" },
    { "title": "Safe Design Limit Excursion" },
    { "title": "Interlocks and Bypasses" }
]

}

Fiddler显示json服务器返回数据，但此UI列表仍为空。

Chrome调试器针对ngFor显示以下内容 - 在Google上描述此确切错误的资源很少，但我假设问题在于我的实现围绕httpclient / async / binding。

我使用https://codecraft.tv/courses/angular/http/http-with-observables/作为参考/首发 - 逐行检查我是否遗漏了任何东西，但是对于Angular还不够了解，但尚未找到明显的指标 - 只是耗尽时间< / p>

Answer 1

问题是你的JSON文件返回safe作为保存战略项集合的某种类型。你没有正确枚举。我会先对布局稍作修改。例如：

<ng-container *ngIf="strategicItem | async as strategicItems">
    <mat-list-item *ngFor="let item of strategicItems.safe">
        <mat-icon>chevron_right</mat-icon><a href="">{{item.title}}</a>
    </mat-list-item>
</ng-container

ng-container在某种意义上不会被渲染，因为它会影响您的Material组件。如果此时您遇到ng-container问题，请尝试将其向上移动到树上，方法是将mat-card元素包裹在ng-container。

这应该可以解决问题。此外，为了遵循约定，您应将可观察变量命名为strategicItem$。

Answer 2

就像Husein Roncevic所提到的那样，你的问题很可能是因为你的数据被包含在＆＃34; safe＆＃34;属性。

如果您想在调用服务后直接使用好类型，可以执行的操作是修改您的getStrategicItems方法，如下所示，将响应的安全属性映射到正确的StrategicItem []类型

getStrategicItems(): Observable<StrategicItem[]>
  {
      return this.httpClient.get(this.safeUrl).map ((resp : any) => resp.safe as StrategicItem[]);
  }

您可以保持其余代码不变

Angular 5异步绑定

2 个答案: