尝试将 API 连接到 Angular 并收到此错误：TS2551：类型"AppComponent"上不存在属性'team'。你是说"团队$"吗？

Question

我正在尝试将一个简单的Angular应用程序连接到API，但我得到了以下错误：

错误：src/app/app.component.html:3:10-错误TS2551:类型"AppComponent"上不存在属性"team"。你是说"团队$"吗？

3   <h2> {{team.first_name}} - {{team._id}}</h2>

有什么想法吗？

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {HttpClientModule} from '@angular/common/http';
import { DataService } from './data.service';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule
],
providers: [DataService],
bootstrap: [AppComponent]
})
export class AppModule { }

data.service.ts

import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import { Team } from './team.model';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class DataService {
apiUrl = 'http://localhost:8080/api/team';

constructor(private _http: HttpClient) { }
getTeam() : Observable<Team[]>{
return this._http.get<Team[]>(`${this.apiUrl}`);
}
}

app.component.ts

import { Component, OnInit } from '@angular/core';
import { Team } from './team.model';
import { DataService } from './data.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
team$?: Team[];
constructor(private dataService: DataService){}

ngOnInit (){
return this.dataService.getTeam()
.subscribe(data => this.team$ = data);
}
//title = 'teamfrontend4';
}

app.component.html

<div *ngFor='let user of team$' style="text-align:center">
<h2> {{team.first_name}} - {{team._id}}</h2>
</div>
<router-outlet></router-outlet>

Answer 1

问题是您在*ngFor中使用user来定义变量，但在调用它时使用team。您能尝试吗？

<div *ngFor='let user of team$' style="text-align:center">
<h2> {{user.first_name}} - {{user._id}}</h2>
</div>
<router-outlet></router-outlet>

也只是一个注意事项，但这取决于你，角度中的$通常只用于主题/可观察的变量，而不是值。