詳細

我調用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響應和共享多個組件，響應

詳細

響應

模型

組件

回答

相關問題