Question

首先，我是angular2的新手，很抱歉，如果这是一个微不足道的问题。我试图将一些代码放在子组件中。我尝试了很多东西，但似乎我无法想出这个。

我试图通过使用http get和subscribe从json获得一些结果。我的理解是在创建视图后加载数据。我能够在我的视图中看到数据，但每当我尝试将代码放在显示组件中的数据时。它不起作用。

我能够通过将ngFor置于found-items组件之外并在子组件中显示一个项目来显示数据。但我真的很想知道为什么在将数组传输到子组件时无法显示数据。

在我看来，angular不会检测到我的子组件中的更改，因为我的数组在页面首次加载时未定义。

所有代码均可在GitHub上找到。

我的父组件HTML代码如下：

<div class="container">
    <h1>Narrow Down Your Chinese Menu Choice</h1>
    <div class="form-group">
      <input type="text" placeholder="search term" class="form-control" [(ngModel)]="searchTerm">
    </div>
    <div class="form-group narrow-button">
      <button class="btn btn-primary" (click)="narrowItDown()">Narrow It Down For Me!</button>
    </div>
<ol>
   <li *ngFor="let item of menuItems; let i = index; ">
       {{ item.short_name }} : {{ item.name }} : {{ item.description }}
      <button (click)="remove(i)">Don't want this one!</button>
   </li> 
</ol>
<found-items [items]='menuItems'></found-items>
</div>

组件found-items没有显示任何内容。但应用程序组件是。

我的父组件TS代码如下：

import {Component,Output,OnInit} from '@angular/core';
import {MenuSearchService,MenuItem} from '../../services/menu-search-service';
import {Observable} from 'rxjs/Rx';
import { FoundItemsComponent }  from '../../components/founditems/founditems.component';

@Component({
    selector: 'narrow-application',
    templateUrl: `app/components/application/app.html`,
})
export class NarrowItDownComponent {
   @Output() menuItems:MenuItem[];
   searchTerm:string="";
    constructor(private menuSearchService: MenuSearchService) { 
     }
    public getMatchedMenuItems(searchTerm:string){
       return this.menuSearchService.getMatchedMenuItems(searchTerm);  
    }

    public narrowItDown(){
        console.log("searchTerm:"+this.searchTerm)
        this.menuItems=this.getMatchedMenuItems(this.searchTerm);
    }

     public remove(index:number){
        console.log("index: "+index)
       this.menuItems.splice(index,1);
    }


    
}

我可以看到我的数据在ngOnChanges方法的子组件中可用。

import {Component,Input,Output,AfterViewInit, ViewChild,ChangeDetectionStrategy,EventEmitter,ViewEncapsulation } from '@angular/core';
import {MenuSearchService,MenuItem} from '../../services/menu-search-service';
import {Observable} from 'rxjs/Rx';
import { NarrowItDownComponent }  from '../../components/application/app.component';

@Component({
    selector: 'found-items',
    templateUrl: `app/components/founditems/founditems.html`,
 })
export class FoundItemsComponent  {
   @Input('items') private  items:MenuItem[];
   @Input('position') private  position:number;

    constructor() { 
    }

    remove() {
      console.log('remove'+this.position);
    }

   ngOnChanges(...args: any[]) {
        console.log('changing', args);
        console.log(this.items);
    }

}

返回数据的服务代码是：

getMatchedMenuItems(searchTerm: string): MenuItem[] {
var elements: MenuItem[] = [];
this.http.get(this.constantService.API_ENDPOINT + "/menu_items.json")
  .flatMap((response) => response.json()['menu_items'])
  .filter((menu_item) => menu_item.description.toLowerCase().indexOf(searchTerm) !== -1)

  .subscribe(

  (menu_item) => {
    console.log(menu_item);
    elements.push(new MenuItem(
      menu_item.id,
      menu_item.short_name,
      menu_item.name,
      menu_item.description,
      menu_item.price_small,
      menu_item.price_large,
      menu_item.small_portion_name,
      menu_item.large_portion_name));
  }

  ,
  function (error) { console.log("Error happened" + error) },
  function () { console.log("the subscription is completed") }
  );

console.log("el :" + elements);
return elements;

}

Answer 1

getMatchedMenuItems正在进行订阅。您将返回自可观察泵异步以来可能填充或不填充的元素列表。

您需要做的是让getMatchedMenuItems返回可观察流（所有内容直至订阅）。

然后，在您的组件初始化后，您想要订阅此可观察流。请使用NarrowItDownComponent工具OnInit：

class NarrowItDownComponent implements OnInit {

然后创建对服务方法的订阅，该方法现在在ngOnInit方法中返回一个可观察的流：

ngOnInit() {
     this.menuSearchService.getMatchedMenuItems(yourSearchTerm)
                           .subscribe(items => {
                               // Your logic here
                           });
}

Answer 2

我认为我发现了您的问题，即在呈现子组件时数据尚不可用。

我认为这应该可以解决问题：

<div *ngIf="menuItems">
  <found-items [items]='menuItems'></found-items>
</div>

从父母那里删除：

@Output() menuItems:MenuItem[];

仅当您想要将某些数据从孩子发送回父母时才需要输出。

除此之外，请按照muzurBucu的建议：

ngOnInit() {
     this.menuSearchService.getMatchedMenuItems(yourSearchTerm)
         .subscribe(items => {
            // Your logic here
         });
}

然后我觉得你很高兴！：）

Angular2子组件html在加载后没有刷新？

2 个答案: