Question

您好，在我的项目中，我尝试使用@Input（）将对象数组从父组件传递到子组件（这是一个自定义模态），但是我没有在子组件中获取该数组，因此我尝试了几乎所有的解决方案堆栈溢出，但我不知道错误。这可能是一个简单的错误，但我无法解决问题。

班级是

export class Fnames
{
      public Fname: string;   
      constructor(Fname: string)
        {
            this.Fname = Fname;
        }

}

perent组件中的对象数组是

   fnames : Fnames [] = [];

子组件中的对象数组是

  @Input() fname : Fnames [] =[];

perent组件的html是

 <app-fname-modal [fname]="fnames"  [(visible)]="fpermission">
     <p *ngFor=" let tmp of fname"> {{tmp.Fname}} </p>
 </app-fname-modal>

子组件（是模态）的html是

<div [@dialog] *ngIf="visible" class="dialog">
    <p *ngFor="let tmp of students">{{tmp.Fname}}</p>
    <!-- <h1>Hi jins it is began to work!</h1> -->
    <button *ngIf="closable" (click)="close()" aria-label="Close" 
     class="dialog__close-btn">X</button>
</div>

错误：

 Cannot find a differ supporting object '[object HTMLInputElement]' of type 'object'.
 NgFor only supports binding to Iterables such as Arrays

Answer 1

尝试正常工作。我从您的代码中删除了一些内容以便快速进行，但您可以根据需要将它们放回去。

fnames.ts

export class Fnames
{
      public fname: string;   
      constructor(fname: string)
        {
            this.fname = fname;
        }

}

父级TS

import { Component } from '@angular/core';
import { Fnames } from './fnames'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public fnames : Fnames [] = [];

  constructor(){
    for(let i = 0 ; i < 5; i++){
      let foo: Fnames = new Fnames(`fooooooooooooooooooooooooooooooo${i}`)
      this.fnames[i] = foo;
    }
  }

}

父HTML

<app-fname-modal [fnames]="fnames" >
</app-fname-modal>

子TS

import { Component, OnInit, Input } from '@angular/core'; import { Fnames } from '../fnames'

@Component({ selector: 'app-fname-modal', templateUrl: './fname-modal.component.html', styleUrls: ['./fname-modal.component.css'] }) export class FnameModalComponent implements OnInit { @Input() fnames : Fnames [] =[]; public students: String[] = new Array();

constructor() { for(let i = 0 ; i < 5; i++){ let student = max${i} this.students[i] = student; } }

ngOnInit() { }

}

子HTML

<div class="dialog">
  <div *ngFor="let student of students">
      <p>{{student}} : </p>
      <p *ngFor="let tmp of fnames">{{tmp.fname}}</p>
    </div>
  <!-- <h1>Hi jins it is began to work!</h1> -->
  <button aria-label="Close" 
   class="dialog__close-btn">X</button>
</div>

使用@Input将对象数组从父组件传递到子组件在Angular 6中不起作用

1 个答案: