Question

以下是我的父（通用）组件，它从服务器加载数据并将其绑定到子（订单）组件

...
// Non integers as a separators
Pattern pattern = Pattern.compile("\\D+");
// List of extracted integers in previous line
List<Integer> previous = pattern.splitAsStream(prev)
    .filter(s -> !s.isEmpty())
    .map(Integer::valueOf)
    .collect(Collectors.toList());
// List of extracted integers in last line
List<Integer> current = pattern.splitAsStream(last)
    .filter(s -> !s.isEmpty())
    .map(Integer::valueOf)
    .collect(Collectors.toList());
// Do something here

在子组件

中

import { Component, OnInit ,Output,EventEmitter} from '@angular/core';
    import { REST,Response } from '../../../services/rest/rest.service';
    import {Observable} from 'rxjs/Observable';

    @Component({
      selector: 'general',
      template: '<div>
      <div class="order">
         <order [order]="orderData"></order>
      </div>
        </div>',
      styleUrls: ['./general.component.css']
    })

    export class GeneralComponent {
       public orderData: Order = null;
      public static projectDataUrl: string = 'orderViewOrder';


      constructor(private rest: REST) {
          this.loadOrderData();
        }
      }





      private loadOrderData(): any {
            this.rest.getWithStringId(GeneralComponent.projectDataUrl, '123').map(
          (res: Response) => res.json()).
          catch((error:any)=>Observable.throw(error.json()||'Server error')).
          subscribe(data => {
            console.log(data);
            this.orderData =<Order>data   // here data is set
          this.notifyOthers.emit(this.orderData)},
           err => console.log("Error should get printed \n"+err),
            () => console.log("It should be executed in the end"));

      }



    }

    export class Order {
      communicatedFinishedDate:number[];
      customerId:number;
      estimatedSampleArrival:number[];
      finishDate:number[];
      id:string;
      name:string;
      oldId:string;
      orderNumber:string;
      quoteNumber: string;
      samplesStoredUntil:any;
      startDate:number[];
      type:string;

    }



    }

问题：父组件成功加载数据但在订单组件中它是空的。

当我调试时，我可以在 this.orderData 中看到数据。

根据我的理解，订阅者就像＆＃34;异步方法＆＃34; OrderComponent在设置之前使用orderData 订户

（如果我错了，请纠正我）

那么解决方案是什么？我读到了关于事件发射器的事情，并尝试在通用组件中执行类似的操作：

@Output（）notifyOthers：EventEmitter = new EventEmitter（）;

并在订阅者中：

**OrderComponent**

import { Component, OnInit ,Input} from '@angular/core';
import {Order} from '../../container/general/general.component';
@Component({
  selector: 'order',
  template: '<div>
<div class="order">
<h2 class="label">Order details</h2><br>
<label>Type</label><br>
<span>{{orderData.type}}</span><br>
<label>Services/Characteristics</label><br>
<span>{{orderData.finishDate}}</span><br>
<label>Quote/Offer No</label><br>
<span>{{orderData.quoteNumber}}</span><br>
<label>Order/Purchase No</label><br>
<span>{{orderData.orderNumber}}</span><br>
</div>
</div>',
  styleUrls: ['./order.component.css']
})
export class OrderComponent  {
@Input('order') public orderData: Order;

  constructor() { 

  }




}

请帮助我。

由于

UPDATE 如何将非空数据绑定到子组件，有没有办法让实例等到我们从Subscriber获取数据？

我正在检查子组件中的orderData实例，如下所示：

...
subscribe(data => {
        console.log(data);
        this.orderData =<Order>data
      this.notifyOthers.emit(this.orderData)},
...

UPDATE2 当我调试控件在OrderComponent中首先实际处理订阅者功能之前。

Answer 1

orderData为null，因为您在订阅者设置之前将其发送到子组件。在你的HTML中尝试这个，这应该工作（如果没有，请通知我）;

...
<div class="order" *ngIf="orderData">
     <order [order]="orderData"></order>
</div>

Angular创建您的组件并调用您的服务，但此服务是异步的。创建子组件时，您的服务响应尚未到达，并且orderData为null已转到您的子组件。

Angular2：更新订阅服务器中的对象

1 个答案: