0

Всем привет. Я пишу приложение на 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?

2
  • 4
    Вложенным циклом...
    – Qwertiy
    1 дек 2021 в 12:04
  • @Qwertiy я прохожусь вложенным массивом, но получаю все объекты todos. А как получить их значения?
    – user450050
    2 дек 2021 в 6:17

1 ответ 1

0

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

<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

8
  • Спасибо за ответ, но у меня выходит ошибка,когда я пытаюсь вывести значение text: <div>{{item | json}}</div> <p>{{item.text}}}</p> </div> Property 'text' does not exist on type 'String'.
    – user450050
    2 дек 2021 в 7:08
  • А в item | json как выглядит поле text? 2 дек 2021 в 7:11
  • item | json выводит объект { "id": 2, "text": "Сделать отчет", "isCompleted": false, "category_id": 2, "created_at": "2021-11-25T06:34:31.167Z", "updated_at": "2021-11-25T06:34:31.167Z" }
    – user450050
    2 дек 2021 в 7:16
  • 1
    А другие поля выводятся? например isCompleted? 2 дек 2021 в 7:21
  • то же выходит ошибка. Может у меня с моделью проблема? export interface Todo{ id: Number, title: string, todos:[ id: Number, text:string, isCompleted:boolean, ] }
    – user450050
    2 дек 2021 в 7:28

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.