Как в angular вывести значение вложенного массива

Question

Всем привет. Я пишу приложение на angular. Вот мой код

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Todo } from '../Todo';
import { getMatIconFailedToSanitizeLiteralError } from '@angular/material/icon';

@Component({
  selector: 'app-form',
  //templateUrl: './form.component.html',
  template: ` <li *ngFor="let todo of todoList">
   
  <input type="checkbox" name="isCompleted" >
  <pre>{{ todo.title }}</pre>
  <span></span>

</li>`,
  styleUrls: ['./form.component.scss']
})
export class FormComponent implements OnInit {
  public todoList: Todo[];
  private httpClient:HttpClient;
    constructor(httpClient:HttpClient) { 
      this.httpClient= httpClient;
    }
  
    ngOnInit() {
     this.httpClient.get<Todo[]>('https://intense-plateau-06126.herokuapp.com/categories')
     .subscribe(todoList=>{
       this.todoList=todoList;
     
      })

А это массив:

[{
  "id": 2,
  "title": "Работа",
  "todos": [
    {
      "id": 2,
      "text": "Сделать отчет",
      "isCompleted": false,
      "category_id": 2,
      "created_at": "2021-11-25T06:34:31.167Z",
      "updated_at": "2021-11-25T06:34:31.167Z"
    }
  ]
}

{
  "id": 4,
  "title": "Другое",
  "todos": [
    {
      "id": 3,
      "text": "Почитать книгу",
      "isCompleted": false,
      "category_id": 4,
      "created_at": "2021-11-25T06:34:53.939Z",
      "updated_at": "2021-11-25T06:34:53.939Z"
    }
  ]
}]

Как мне получить все значения todos?

Answer 1

Как и говорят в комментариях, вложенный цикл. Выглядит он примерно так:

<li *ngFor="let todo of todoList">

  <input type="checkbox" name="isCompleted">
  <pre>{{ todo.title }}</pre>


  <!-- Здесь начинается ваш вложенный цикл todos -->
  <div *ngFor="let item of todo.todos">


    <!-- Здесь просто укажите разметку того, как должны отображаться ваши todos -->
    <div>{{item | json}}</div>


  </div>
</li>

Можно также упростить код родительского компонента, чтобы было понятнее происходящее. А именно, сделать компонент, который будет через @Input() принимать ваши todos и внутри отрисовывать их через *ngFor

БЛОГ НА HUSL

Как в angular вывести значение вложенного массива

Ответы (1 шт):