1

Есть сервер на который посылается запрос и возвращается JSON файл такой структуры:

[{
"id":1
"title": "Title",
"created_at": "zzz",
"updated_at": "zzz",
"todos": [
{"id":1
"title": "Title",
"created_at": "zzz",
"updated_at": "zzz"},
{}]},{}]

Файл http.service.ts

import {Observable} from 'rxjs';
import { map } from 'rxjs/operators';
import {project} from "./todos";

@Injectable()
export class HttpService{

  constructor(private http: HttpClient){ }

  getData(): Observable<project[]>{
    return this.http.get('url').pipe(map((data:any)=>{
      let projectList = data["projects"];
      return projectList.map(function(prj: any): project {
        return new project(prj.id, prj.title, prj.todo);
      });
    }));
  }
}

Классы для обработки json

interface todo {
  id: number;
  project_id: number;
  title: string;
  is_completed: boolean;
}
export class project {
  constructor(public id: number, public title: string,public items: todo[]){}
}

И сам компонент

export class AppComponent {
  projects: project []=[];

  constructor(private httpService: HttpService){}

  ngOnInit(){
    this.httpService.getData().subscribe((data: project[]) => this.projects=data);
  }
}

Если я все делаю верно, как мне в html вывести todo? С выводом project нет проблем:

<ul>
<li *ngFor="let project of projects">
  <p>{{project?.title}}</p>

  </li>
</ul>

1 ответ 1

1

Также как и проекты. У вас массив, используйте *ngFor

<ul>
  <li *ngFor="let project of projects">
    <p>{{project?.title}}</p>
    <div *ngFor="let todo of project.items">{{todo.title}}</div>
  </li>
</ul>
11
  • Я не знаю почему, ошибок не дает, но ничего не выводит. 5 июл 2021 в 8:07
  • а с сервера todos точно приходит?
    – Komdosh
    5 июл 2021 в 8:10
  • и он приходит в том виде, который вы описали? С пустыми объектами? или это просто плейсхолдер, чтобы показать, что там много элементов?
    – Komdosh
    5 июл 2021 в 8:12
  • да, но в классе он прописан как items, я это учла 5 июл 2021 в 8:12
  • там не пусто, просто показать что их много 5 июл 2021 в 8:13

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.