将数组从父级传递给子级答案

【问题标题】：Passing array from parent to child将数组从父级传递给子级
【发布时间】：2018-04-12 13:51:15
【问题描述】：

我试图将一个数组从父级传递给子级，但是当我在子级中查看它时，我得到了值undefined。我已经尝试了这里的解决方案来解决它。

DvnlandingComponent.ts（父）

       import { HttpService } from '../services/http.service';

   export class DvnlandingComponent implements OnInit {
   count: number = 0;
   constructor(private http: Http,
   private service: HttpService)
   ngOnInit() {
        this.printConfigNames();
    }

            printConfigNames() {
        this.service.getAllconfigNames();
    }
    }

HTML

<results-component *ngIf="activeTab === 'Results'" [cfn]="configNames"></results-component>

ResultsComponent.ts（儿童）

import { DvnlandingComponent } from './../dvn-landing.component';
     export class ResultsComponent implements OnChanges {
      @Input() cfn: any[] = [];
          ngOnit() {
        console.log(this.cfn);
    }

    ngOnChanges(changes: SimpleChanges) {
          if (typeof changes['cfn'] !== 'undefined') {
            console.log(this.cfn);
    }
    }

            printConfigNames() {
        console.log(this.cfn);
    }

HTML

        <select>
                <option selected>Select Config Name</option>
            <option *ngFor="let n of cfn" value="n" (click)="printConfigNames()">{{n}}</option>
        </select>

我的服务

@Injectable()
export class HttpService {
  getdata: any;
  count: number = 0;
  public configNames = [];
  constructor(private http: Http) { }

      getAllconfigNames() {
        let headers = new Headers();
        headers.set('Content-Type', 'application/json');
        headers.set('JsonStub-User-Key', '157abb1d-fc96-4e00-83c7-9f286f6ef518');
        headers.set('JsonStub-Project-Key', '720d2af8-f159-41b4-9746-0476793869b4');

        let getUrl = 'http://jsonstub.com/getAllSchedulerConfigs';
        return this.http.get(getUrl, {headers: headers})
        .subscribe(res => {
            this.getdata  = res.json();
            while (this.count < this.getdata.length) {
            this.configNames.push(this.getdata[this.count]['configName']);
            this.count++;
        }
        });
      }
      getData() {
        return this.configNames;
      }

    }

【问题讨论】：

configNames 定义在哪里？？
configNames 未在您的DvnlandingComponent 中定义。尝试添加configNames = ['test1', 'test2', 'test3']

标签： angular typescript parent-child

【解决方案1】：

你的代码有很多问题。

(i) 您的父组件中没有 configNames。确保你已经定义了它。

configNames: any[];

printConfigNames() {
    this.service.getAllconfigNames().subscribe(res => this.configNames = res);
}

(ii) 您正在初始化子组件上的空数组，这将清除其中的元素

 @Input() cfn: any[] = [];

改成

 @Input() cfn: any[] ;

(iii) 你的子组件应该实现 OnInit

导出类 ResultsComponent 实现 OnInit {

 ngOnInit(): void {
     console.log(this.cfn);
 }

【讨论】：

【解决方案2】：

没有看到服务，但假设您在父级中使用 observables：

configNames: any[];

printConfigNames() {
    this.service.getAllconfigNames().subscribe(res => this.configNames = res);
}

希望能有所帮助。

【讨论】：