【问题标题】:To get data from service to my component从服务获取数据到我的组件
【发布时间】:2018-06-28 02:06:27
【问题描述】:

我的服务是下面的 PortAllocationService

@Injectable({
  providedIn: 'root'
})
export class PortAllocationService {
  businessSwitchName: any;businessSwitchIp: any;businessSwitchportName: any;
  businessSwitchNodeId: any;routerName: any;routerIp: any;routerDetailsportName: any;
  routernodeID: any;aggSwitchName: any;aggSwitchPort: any;aggNodeIP: any;
  aggNodeId: any;serviceName: any;convertorDetails: any;handoffPort: any;qosLoopingPort: any;

  constructor(private http:HttpClient) { }

  portService(da){
    return this.http.post(url.portAllocationUrl , da).
    subscribe ((response:any) => {
      //Port Allocation response is mapped here
      console.log(response);
      // businessSwitchDetails 
      this.businessSwitchName = response.businessSwitchDetails.nodeName;
      this.businessSwitchIp = response.businessSwitchDetails.nodeIP;

     });

  }

和我的组件如下

export class WimaxFormComponent {
  data : any = {};
  btsIp :any; vCategory:any;nVlan:any;
 businessSwitchName:any;businessSwitchIp:any;businessSwitchportName:any;
 routerName:any;routerIp:any;aggSwitchName:any;aggSwitchPort:any;
 routerDetailsportName:any;routernodeID:any;aggNodeIP: any;aggNodeId: any;
 businessSwitchNodeId: any;serviceName: any;convertorDetails: any;
 handoffPort: any;qosLoopingPort: any;
 serviceId: any;serviceType: any;customerName: any;
 vReservedValue:boolean;cVlan: string;sVlan: any;
 path: string;

   constructor(
  private service: PortAllocationService){

  }

onChange(){

  let portAllocationData = {
  "serviceAttribute": {
    "serviceType": this.serviceType,
    "category": "category",
    "name": this.serviceId
  },
  "btsIp": this.btsIp
}
console.log(portAllocationData);

  this.service.portService(portAllocationData);
}

当我调用 onChange 函数时,调用的是服务,我们从服务器获得响应。但是我想访问从我的服务到组件的所有变量值,例如我在构造函数和 onChange 中都尝试过

this.businessSwitchName = service.businessSwitchName // 这是未定义的

请告诉我如何将变量值访问到组件中。

【问题讨论】:

  • console.log(response);中显示什么?
  • 响应来自服务器。
  • 好吧看看thisthis
  • 嘿,我不明白 BehaviourSubject 的这个概念。您能否根据我的问题中的上述代码实现它。这将非常有帮助。谢谢

标签: javascript angular


【解决方案1】:

我不会在服务本身中订阅 API 调用,而是简单地返回由 http.post() 生成的 observable。然后将订阅移动到组件本身:

服务:

portService(da){ return this.http.post(url.portAllocationUrl , da) });

组件:

this.service.portService(portAllocationData).subscribe(response => {
    // Do stuff with the response here
});

但是,如果您真的想保留服务中的变量,我会将 API 调用放在服务的构造函数中,将服务中的字段更改为以下划线(或其他一些本地/私有标识符)开头然后为您希望能够访问的每个变量设置 get 方法。

服务:

get businessSwitchName() {
    return this._businessSwitchName;
}

组件:

this.service.businessSwitchName

【讨论】:

  • 我一直在服务,因为我也想在其他组件中使用该变量值。
  • @ImRaNJB,我添加了关于如何从服务访问数据的说明。
  • 我将如何在我的服务的构造函数中实现我的 API 调用??
  • @ImRaNJB,我建议将 API 调用移至构造函数,以防止需要显式调用 API 方法……只是节省了一步。但是,我看到您将一个对象传递给 API 调用。所以你可能只需要显式调用 API 方法(就像你现在一样)。但其余的答案仍然适用!
  • @ Nicholas ,我已经尝试过您所说的方式,但 businessSwitchName 仍然未定义,因为在 http 请求/响应完成之前,获取 businessSwitchName 的代码被执行并将其设置为未定义跨度>
猜你喜欢
  • 2020-01-16
  • 1970-01-01
  • 2021-11-23
  • 2020-07-01
  • 2017-11-04
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多