Newb ie Вопрос: Angular - Передача данных от родителя к потомку - PullRequest
Новая
       16

Newb ie Вопрос: Angular - Передача данных от родителя к потомку

0 голосов
/ 18 июня 2020

Я пытаюсь создать свое первое приложение после прохождения пары Angular онлайн-курсов, поэтому я очень к этому отношусь.

Что я пытаюсь сделать:

Я пытаюсь создать таблицу с заголовком имени приложения, а под каждым именем приложения находится список компонентов этого приложения, из которых оно состоит. Таким образом, в каждом приложении должен быть указан как минимум один компонент.

У меня есть 3 компонента:

  • Основной компонент приложения (APP)
  • Имя приложения (APPLICATION)
  • Компонент элемента приложения ( ПУНКТЫ ПРИЛОЖЕНИЯ).

Мой план состоит в том, чтобы приложение могло вызывать API и получать список приложений (идентификатор и имя) (допустим, 3). Затем я пытаюсь вызвать другой API, который получит список элементов для этого c приложения из компонента APPLICATION ITEMS и отобразит их под этой таблицей в компоненте APPLICATION ITEMS.

Что такое проблема?

Первая часть работает, и я передаю имена приложений компоненту. В части, которая терпит неудачу, я пытаюсь вызвать 2-й API для получения элементов. Кажется, я не могу получить идентификатор, переданный от родителя для включения в вызов API.

app.component.ts 

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  appURL: string = 'http://localhost:3333/application'
  appsName = []
  appsID = []

  constructor(private http: HttpClient) {

    this.http.get(this.appURL).toPromise().then(data => {

      for (let key in data){
        if (data.hasOwnProperty(key)){
           this.appsID.push(data[key].id)
          console.log("ID = " + data[key].id)
          this.appsName.push(data[key].name)
          console.log("Name = " + data[key].name)
        } 
      }  

    })
  }
}

* Консоль возвращает : 

ID = 1
Name = This Website
ID = 2
Name = Google
ID = 3
Name = My Website

applicationitems.component.ts 

import { Component, Input } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-statuscarditems',
  templateUrl: './statuscarditems.component.html',
  styleUrls: ['./statuscarditems.component.css']
})

export class StatuscarditemsComponent {

  @Input() appsID: number

  appURL: string = 'http://localhost:3333/application/item/' + this.appsID
  appItems = []

  constructor(private http: HttpClient) {

    // Retrieve List of Applications from the database
    this.http.get(this.appURL).toPromise().then(data => {

      for (let key in data){
        if (data.hasOwnProperty(key)){
          this.appItems.push(data[key].name)
          console.log("Name = " + data[key].name)
        } 
      }
    })
  }
}

URL-адрес в этом случае становится: http://localhost: 3333 / application / item / undefined

Я знаю, что мой метод неправильный, но, будучи новичком в этом, я изо всех сил пытаюсь понять, где я ошибаюсь, и это расстраивает, поскольку я знаю это должно быть легко и очевидно для меня.

Любая помощь будет принята с благодарностью. Заранее спасибо.

EDIT: app.component. html

<div class="container">
  <h1 align="center">Applications and Components</h1>
  <!--<app-registerapp></app-registerapp> -->

  <div class="row col-sm">
    <table class="table">
        <tr><td *ngFor="let app of appsName"><app-statuscard [appsName]="app"></app-statuscard></td></tr>
        <tr><td><app-statuscarditems></app-statuscarditems></td></tr>
    </table>
  </div>

</div>

(Я знаю, что еще не сделал второй * ngFor, но я я собираюсь изменить, как только смогу получить данные)

1 Ответ

0 голосов
/ 18 июня 2020

Вы пытаетесь использовать this.appId до его назначения. Ваш конструктор будет вызываться до того, как будет назначен appId, что означает, что URL-адрес будет неправильным в то время.

Я предлагаю добавить сеттер к вашему вводу. С установщиком, как только значение будет определено, вы сможете выполнить http-вызов, используя retreiveData() с правильным URL-адресом. Вы также можете добавить условие на случай, если число по какой-то причине не определено, но я его не предоставил. 

_appId: number
appURL: string
@Input() set appsID(id: number) {
    this._appId = id; //pretty much useless here
    this.appURL = 'http://localhost:3333/application/item/' + id
    this.retreiveData();
}

retreiveData() {
    this.http.get(this.appURL).toPromise().then(data => {
      for (let key in data){
        if (data.hasOwnProperty(key)){
          this.appItems.push(data[key].name)
          console.log("Name = " + data[key].name)
        } 
      }
    })
}

Вам необходимо передать идентификатор в качестве входных данных для дочернего компонента 

<tr><td *ngFor="let id of appsID"><app-statuscarditems [appsId]=id></app-statuscarditems></td></tr>
...