无法将 ngfor 索引从 HTML 发送到子组件

分享于2023年03月15日 angular html typescript 问答
【问题标题】:Can't send ngfor index from HTML to child component无法将 ngfor 索引从 HTML 发送到子组件
【发布时间】:2020-02-13 13:24:38
【问题描述】:

我试图让我的子组件读取父 HTML 的 ngfor 值以显示子页面。但是子组件似乎没有从父页面获取索引号。

这是我的父母:app.component.html:

     
  • {{item.value["label"]}}

这是孩子:Columns.component.ts

import { FormBuilderComponent } from 'angular-formio';
import { Injectable } from '@angular/core';
import { Component, Input } from '@angular/core';
//import { ColumnComponent } from 'src/column/Column.component';
import { AppComponent } from '../app.component'

@Injectable()

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

export class ColumnsComponent {
    @Input() columnsData: object[]; 
    public saveData: object[];
    @Input() public indexnumber: string; 

    constructor(public appComponent: AppComponent){ 
        if (this.indexnumber) {
            this.columnsData = appComponent.Temp2[this.indexnumber]["component"];
        }
    }
}

indexnumber 的值始终未定义。我想知道如何使 Columns.component.ts 中的索引号获得 ngfor 'i' 值?


【解决方案1】:

首先,数组的索引是一个数字,而不是一个字符串。所以

@Input() public indexnumber: string; 

应该是

@Input() public indexnumber: number; 

第二:为了让angular能够设置你的组件的索引号,你的组件需要存在。所以它一定是在 之前 构建的。因此,在调用构造函数时,可能还不能设置输入。所以试图在构造函数中访问输入的值不可能给你父级传递的值。

使用 ngOnInit 或 ngOnChanges。这是第一次设置/更改输入时调用的方法。

【讨论】:

  • ngOnInit(){ this.columnsData = this.appComponent.Temp2[this.indexnumber]["component"]; }