首页 > 解决方案 > 角度错误 TS2339 试图从烧瓶服务器访问/检索数据

问题描述

我正在尝试从烧瓶数据库中提取数据并将其呈现在 Angular 上。在 item/item.component.ts 中出现错误并出现错误 TS2339:“ItemComponent”类型上不存在属性“itemdata”

访问烧瓶端点按预期显示数据数组,所以我认为这与问题无关。

在 itemdata.service.ts

...
@Injectable({
  providedIn: 'root'
})

export class ItemdataService {

  constructor(private http: HttpClient) { }

  private API_URL = 'http://localhost:5000/item';

  getItem(): Observable<Item[]>{
  return this.http.get<Item[]>(this.API_URL);
  }

}

在 item.component.ts

...
import {Item} from '../item';
import {ItemdataService} from '../itemdata.service';

...
export class ItemComponent implements OnInit {

  item: Item[];

  constructor() { }

  getItem(): void{
    this.itemdata.getItem().subscribe(item=>this.item = item);
  }

  ngOnInit() {
  }

}

预期成功编译并成功检索数据以用于显示。

编辑:现在使用构造函数(私有 itemdata:ItemdataService)

但是数据未显示在模板中。
数据

[{"id": 1, "name": "First item"}, {"id": 2, "name": "Second item"}, {"id": 3, "name": "Third item"}]

item.component.html

<p>item list</p>

<ul>
    <li *ngFor = "let x of item">
      <span>{{x.name}}</span>
    </li>
</ul>

<p>end of item list</p>

数据未显示在页面上。相反,仅显示基本页面和“项目列表的项目列表末尾”。

标签: javascriptangular

解决方案


constructor(private itemdata: ItemdataService)

推荐阅读