I'm trying to fetch data from this link, but when I do, I get error TS2339: Property 'title' does not exist on type 'Projects[]' even though there is property 'title' in 'Projects'. I'm trying to access projects.title in html. I get all data i need from backend when I call it from Postman, but here I just cannot get .html to "print" title of a project. Here are all the files I'm using... Thanks in advance :)

app.component.html

<div >
  <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 { }

CodePudding user response：

The issue is in your file project-list.component.html

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

should be

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

Projects is the array or list you are looping on. You can access property on individual object in the array. Happy Coding :)