详细

我调用API它给了我一些回应，我想将它保存在我的模式我已经创建的，在我要共享将模型数据转换为多个组件，因为我不想每次都发送请求来获取数据，因为响应中首先有两件事是包含许多Apis和第二apis的产品。现在，当我想要一个特定的API产品时，我必须发送另一个我不想要的请求。因为响应给我提供了产品的全部数据，而apis是一次性调用。我怎么能实现它。模型存储API响应和共享多个组件，响应

响应

[ 
    { 
    "Id": 0, 
    "ApimId": "5746ebcfcd7c3209247edc40", 
    "Name": "Atea Service Desk", 
    "Description": "Service Desk and Operations", 
    "SubscriptionRequired": false, 
    "ApprovalRequired": false, 
    "State": "published", 
    "Apis": [ 
     { 
     "Id": 0, 
     "ApimId": "5746ba28804136004d040001", 
     "Name": "Echo API", 
     "Description": null, 
     "ServiceUrl": "http://echoapi.cloudapp.net/api", 
     "ScopeId": 0, 
     "WorkflowId": 0, 
     "Workflow": null, 
     "Scope": null, 
     "CreatedDate": "2016-10-04T18:49:32.2553822+05:00", 
     "CreatedBy": "LHR\\ahja", 
     "UpdatedDate": "2016-10-04T18:49:32.2553822+05:00", 
     "UpdatedBy": "LHR\\ahja" 
     }, 
     { 
     "Id": 0, 
     "ApimId": "574c167dcd7c3216c8c633b3", 
     "Name": "Servicedesk and Operations", 
     "Description": "Atea Servicedesk and Operations Internal API", 
     "ServiceUrl": "http://dev-endpoint.atea.com/RFC", 
     "ScopeId": 0, 
     "WorkflowId": 0, 
     "Workflow": null, 
     "Scope": null, 
     "CreatedDate": "2016-10-04T18:49:32.2564039+05:00", 
     "CreatedBy": "LHR\\ahja", 
     "UpdatedDate": "2016-10-04T18:49:32.2564039+05:00", 
     "UpdatedBy": "LHR\\ahja" 
     }, 
     { 
     "Id": 0, 
     "ApimId": "574eb044cd7c320600975d85", 
     "Name": "Swagger Petstore", 
     "Description": "This is a sample server Petstore server. You can find out more about Swagger at [http://swagger.io](http://swagger.io) or on [irc.freenode.net, #swagger](http://swagger.io/irc/). For this sample, you can use the api key `special-key` to test the authorization filters.", 
     "ServiceUrl": "http://petstore.swagger.io/v2", 
     "ScopeId": 0, 
     "WorkflowId": 0, 
     "Workflow": null, 
     "Scope": null, 
     "CreatedDate": "2016-10-04T18:49:32.2574041+05:00", 
     "CreatedBy": "LHR\\ahja", 
     "UpdatedDate": "2016-10-04T18:49:32.2574041+05:00", 
     "UpdatedBy": "LHR\\ahja" 
     }, 
     { 
     "Id": 0, 
     "ApimId": "574eb27fcd7c320600975d86", 
     "Name": "Swagger Petstore API", 
     "Description": "This API is design by Swagger.io", 
     "ServiceUrl": "http://petstore.swagger.wordnik.com/api", 
     "ScopeId": 0, 
     "WorkflowId": 0, 
     "Workflow": null, 
     "Scope": null, 
     "CreatedDate": "2016-10-04T18:49:32.2584048+05:00", 
     "CreatedBy": "LHR\\ahja", 
     "UpdatedDate": "2016-10-04T18:49:32.2584048+05:00", 
     "UpdatedBy": "LHR\\ahja" 
     } 
    ], 
    "CreatedDate": "2016-10-04T18:49:32.2594056+05:00", 
    "CreatedBy": "LHR\\ahja", 
    "UpdatedDate": "2016-10-04T18:49:32.2594056+05:00", 
    "UpdatedBy": "LHR\\ahja" 
    }, 
    { 
    "Id": 0, 
    "ApimId": "57eb9930cd7c320760ee317e", 
    "Name": "Non Workflow", 
    "Description": "Workflow not applied to the contained APIs", 
    "SubscriptionRequired": false, 
    "ApprovalRequired": false, 
    "State": "published", 
    "Apis": [ 
     { 
     "Id": 0, 
     "ApimId": "574eb044cd7c320600975d85", 
     "Name": "Swagger Petstore", 
     "Description": "This is a sample server Petstore server. You can find out more about Swagger at [http://swagger.io](http://swagger.io) or on [irc.freenode.net, #swagger](http://swagger.io/irc/). For this sample, you can use the api key `special-key` to test the authorization filters.", 
     "ServiceUrl": "http://petstore.swagger.io/v2", 
     "ScopeId": 0, 
     "WorkflowId": 0, 
     "Workflow": null, 
     "Scope": null, 
     "CreatedDate": "2016-10-04T18:49:32.8218186+05:00", 
     "CreatedBy": "LHR\\ahja", 
     "UpdatedDate": "2016-10-04T18:49:32.8218186+05:00", 
     "UpdatedBy": "LHR\\ahja" 
     }, 
     { 
     "Id": 0, 
     "ApimId": "574eb27fcd7c320600975d86", 
     "Name": "Swagger Petstore API", 
     "Description": "This API is design by Swagger.io", 
     "ServiceUrl": "http://petstore.swagger.wordnik.com/api", 
     "ScopeId": 0, 
     "WorkflowId": 0, 
     "Workflow": null, 
     "Scope": null, 
     "CreatedDate": "2016-10-04T18:49:32.8228184+05:00", 
     "CreatedBy": "LHR\\ahja", 
     "UpdatedDate": "2016-10-04T18:49:32.8228184+05:00", 
     "UpdatedBy": "LHR\\ahja" 
     } 
    ], 
    "CreatedDate": "2016-10-04T18:49:32.8238186+05:00", 
    "CreatedBy": "LHR\\ahja", 
    "UpdatedDate": "2016-10-04T18:49:32.8238186+05:00", 
    "UpdatedBy": "LHR\\ahja" 
    }, 
    { 
    "Id": 0, 
    "ApimId": "5746ba28804136004d060001", 
    "Name": "Starter", 
    "Description": "Subscribers will be able to run 5 calls/minute up to a maximum of 100 calls/week.", 
    "SubscriptionRequired": false, 
    "ApprovalRequired": false, 
    "State": "notPublished", 
    "Apis": [], 
    "CreatedDate": "2016-10-04T18:49:33.4234324+05:00", 
    "CreatedBy": "LHR\\ahja", 
    "UpdatedDate": "2016-10-04T18:49:33.4234324+05:00", 
    "UpdatedBy": "LHR\\ahja" 
    }, 
    { 
    "Id": 0, 
    "ApimId": "5746ba28804136004d060002", 
    "Name": "Unlimited", 
    "Description": "Subscribers have completely unlimited access to the API. Administrator approval is required.", 
    "SubscriptionRequired": false, 
    "ApprovalRequired": false, 
    "State": "published", 
    "Apis": [ 
     { 
     "Id": 0, 
     "ApimId": "5746ba28804136004d040001", 
     "Name": "Echo API", 
     "Description": null, 
     "ServiceUrl": "http://echoapi.cloudapp.net/api", 
     "ScopeId": 0, 
     "WorkflowId": 0, 
     "Workflow": null, 
     "Scope": null, 
     "CreatedDate": "2016-10-04T18:49:33.9833659+05:00", 
     "CreatedBy": "LHR\\ahja", 
     "UpdatedDate": "2016-10-04T18:49:33.9833659+05:00", 
     "UpdatedBy": "LHR\\ahja" 
     } 
    ], 
    "CreatedDate": "2016-10-04T18:49:33.9843647+05:00", 
    "CreatedBy": "LHR\\ahja", 
    "UpdatedDate": "2016-10-04T18:49:33.9843647+05:00", 
    "UpdatedBy": "LHR\\ahja" 
    } 
]

模型

import {Api} from './api'; 
export class ProductModel { 
    public Id: number; 
    public Apim: string; 
    public ApprovalRequired: boolean; 
    public Name: string; 
    public Description: string; 
    public ServiceUrl: string; 
    public State: string; 
    public SubscriptionRequired: boolean; 
    public Apis: Api[]; 
} 

export class Api{ 
    Id: 0; 
    ApimId: string; 
    Name: string; 
    Description: string; 
    ServiceUrl: string; 
    ScopeId: number; 
    WorkflowId: number; 
    Workflow: any; 
    Scope: any; 
    CreatedDate: string; 
    CreatedBy: string; 
    UpdatedDate: string; 
    UpdatedBy: string; 
}

组件

import { Component, Output, EventEmitter, Input } from '@angular/core'; 
import {ProductService} from '../../services/product.service'; 
import {OnInit} from '@angular/core'; 
import {Observable} from 'rxjs/Observable'; 
import {PaginatePipe, PaginationControlsCmp, PaginationService, IPaginationInstance} from 'ng2-pagination'; 
import { Router } from '@angular/router'; 
import {NotificationsService, SimpleNotificationsComponent} from 'angular2-notifications'; 
import {LoadingComponent} from '../../../app/components/loading.component'; 

import { ProductModel} from '../../models/product.model' 

@Component({ 
    selector: 'products', 
    templateUrl: '../../app/components/product/product.html', 
    providers: [ProductService, PaginationService, NotificationsService], 
    directives: [PaginationControlsCmp, SimpleNotificationsComponent, LoadingComponent], 
    pipes: [PaginatePipe] 
}) 

export class ProductComponent implements OnInit { 
private data: Observable<any[]>; 
private id: number; 
private partners: Observable<any[]>; 
isAuthorized: boolean = false; 
private status: string; 
public config: IPaginationInstance = { 
    id: 'custom', 
    itemsPerPage: 10, 
    currentPage: 1 
}; 
product: ProductModel; 
public options = { 
    timeOut: 3000, 
    lastOnBottom: true, 
    clickToClose: true, 
    maxLength: 0, 
    maxStack: 7, 
    showProgressBar: true, 
    preventDuplicates: false, 
    rtl: true, 
    animate: "scale", 
    position: ["right", "top"] 
}; 

constructor(
    private productService: ProductService, 
    private notificationService: NotificationsService) { 
    this.status = 'loading'; 
} 

ngOnInit() { 
    this.productService.getProducts() 
     .subscribe(data => { 
      this.isAuthorized = true; 
      this.data = data; 
      this.product.Apim = data.Apim; 

      this.status = 'active'; 
     }, 
     error => { 
      console.log("error while retriving product"); 
      console.log(error); 
     }); 
    } 
}

来源

2016-10-05 Malik Kashmiri

你有什么试过？ C创建服务并将数据存储在服务中。如果你需要帮助了解这些服务，请阅读更多关于它们的信息（https://angular.io/docs/ts/latest/tutorial/toh-pt4.html） –

我更新了我的组件 –

一种可能的方式是使用一个共同的服务，并使用该服务来检索和存储/认为数据。你可以在Parent and children communicate via a service的例子中看到这个。

另一种方法是使用cookie来存储这些数据，并在每个组件中读取来自cookie的数据，但是cookie在可存储多少数据方面存在限制。

第三种选择是利用本地存储的力量。

来源

2016-10-05 10:22:20 Pradeep

我们必须使用提供者进行数据管理。

export class TestProvider { 

data: any; 

constructor(private http: Http) { 
    this.data = null; 
} 

getProductById(id) { 
    if (this.data) { 
     return Promise.resolve(this.data); 
    } 

    return new Promise(resolve => { 
     this.http.get('path/to/data.json') 
     .map(res => res.json()) 
    .subscribe(data => { 
     this.data = data; 
     resolve(this.data); 
     }); 
    }); 
    } 
}

所以，如果“数据”对象有值，那么方法将返回的数据对象，将无法连接到API。

我希望这能解决您的问题。

来源

2016-10-05 10:32:48

模型存储API响应和共享多个组件，响应

详细

响应

模型

组件

回答

相关问题