属性'title'在类型 'Projects[]' 上不存在

Question

我正试图从该链接中获取数据，但当我这样做时，我会收到错误TS2339：类型"Projects[]"上不存在属性"title"，即使"Projects"中有属性"title"。我正在尝试访问html中的projects.title。当我从Postman调用它时，我从后端获得了我需要的所有数据，但在这里我无法将.html转换为"；打印"；项目的标题。以下是我正在使用的所有文件。。。提前感谢：(

app.component.html
<div class="container">
<h1 class = "mt-3 mb-3">Projects</h1>
</div>

project-list.component.html
<p *ngFor="let tempProject of projects">
{{ projects.title }}
</p>

projects.ts
export class Projects {
constructor(public title: string,
public href: string,
public description: string,
public dateModified: string
){
}
}

projects.service.ts
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { map, Observable } from 'rxjs';
import { Projects } from '../common/projects';
@Injectable({
providedIn: 'root',
})
export class ProjectsService {
private allProjectsURL = 'http://localhost:8080/list/projects';
constructor(private httpClient: HttpClient) {}
getAllProjectsList(): Observable<Projects[]> {
return this.httpClient
.get<GetResponse>(this.allProjectsURL)
.pipe(map((response) => response._embedded.projects));
}
}
interface GetResponse {
_embedded: {
projects: Projects[];
};
}
<!-- begin snippet: js hide: false console: true babel: false -->

project-list.component.ts
import { Component, OnInit } from '@angular/core';
import { Projects } from 'src/app/common/projects';
import { ProjectsService } from 'src/app/services/projects.service';
@Component({
selector: 'app-project-list',
templateUrl: './project-list.component.html',
styleUrls: ['./project-list.component.css']
})
export class ProjectListComponent implements OnInit {
projects: Projects[] = [];
constructor(private projectsService: ProjectsService) { }
ngOnInit(): void {
this.listProjects();
}
listProjects() {
this.projectsService.getAllProjectsList().subscribe(
data => {
this.projects = data;
}
)
}
}

app.module.ts
import { NgModule } from '@angular/core';
import {HttpClientModule} from '@angular/common/http';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ProjectsService } from './services/projects.service';
import { ProjectListComponent } from './components/project-list/project-list.component';
@NgModule({
declarations: [
AppComponent,
ProjectListComponent
],
imports: [
BrowserModule,
HttpClientModule
],
providers: [ProjectsService],
bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

问题在您的文件project-list.component.html中

<p *ngFor="let tempProject of projects">
{{ projects.title }} 
</p>

应该是

<p *ngFor="let tempProject of projects">
{{ tempProject.title }} 
</p>

Projects是循环使用的数组或列表。您可以访问数组中单个对象的属性。快乐编码：(