新手问题：Angular - 将数据从 parent 传递到 child

Question

我正在尝试通过几个 Angular 在线课程在运行之后创建我的第一个应用程序，所以我对此很陌生。

我想做什么：

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

我有 3 个组成部分：

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

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

有什么问题？

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

    })
  }
}

*控制台returns:

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>

新手问题：Angular - 将数据从 parent 传递到 child

Newbie Question: Angular - Passing of data from parent to child

angular

angular-components