新手问题：Angular - 将数据从父级传递给子级

Question

在完成了几门 Angular 在线课程后，我正在尝试创建我的第一个应用程序，所以我对此非常满意。

我想做的事：

我正在尝试创建一个具有应用程序名称标题的表，并且在每个应用程序名称下是该应用程序组成它的组件的列表。因此，每个应用程序都至少有一个要在其下列出的组件。

我有 3 个组件：

• 主应用组件 (APP)
• 应用程序名称（APPLICATION）
• 应用程序项组件 (APPLICATION ITEMS)。

我的计划是让 APP 调用 API 并检索应用程序列表（id 和名称）（比如说 3）。然后，我尝试调用另一个 API，该 API 将从 APPLICATION ITEMS 组件中检索该特定应用程序的项目列表，并将它们显示在组件 APPLICATION ITEMS 中的该表下。

有什么问题？

第一部分有效，我将应用程序名称传递给组件。 失败的部分是我尝试调用第二个 API 来检索项目的地方。 我似乎无法让从父级传递下来的 ID 包含在 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

我知道我的方法是错误的，但是对于这方面的新手来说，我正在努力找出哪里出错了，这很令人沮丧，因为我知道这应该很容易，而且对我来说非常明显。

任何帮助将不胜感激。提前致谢。

编辑： 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 - 但是一旦我可以检索数据，我就会进行更改）

Answer 1

您正在尝试在分配之前使用 this.appId。您的构造函数将在分配 appId 之前被调用，这意味着那时 url 将是错误的。

我的建议是在您的输入中添加一个 setter。使用 setter，只要定义了值，您就可以使用 retreiveData() 和正确的 url 进行 http 调用。如果由于某种原因未定义数字但我没有提供，您也可以添加条件。

_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)
        } 
      }
    })
}

您需要将 id 作为输入传递给子组件

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