Angular में http एक के समान स्थैतिक डेटा से एक ऑब्जर्वेबल कैसे बनाया जाए?

Question

मैं एक सेवा कर रहा हूँ जिसमें यह विधि है:

export class TestModelService {

    public testModel: TestModel;

    constructor( @Inject(Http) public http: Http) {
    }

    public fetchModel(uuid: string = undefined): Observable<string> {
        if(!uuid) {
            //return Observable of JSON.stringify(new TestModel());
        }
        else {
            return this.http.get("http://localhost:8080/myapp/api/model/" + uuid)
                .map(res => res.text());
        }
    }
}

घटक के निर्माता में मैं इस तरह सदस्यता ले रहा हूं:

export class MyComponent {
   testModel: TestModel;
   testModelService: TestModelService;

   constructor(@Inject(TestModelService) testModelService) {
      this.testModelService = testModelService;

      testService.fetchModel("29f4fddc-155a-4f26-9db6-5a431ecd5d44").subscribe(
          data => { this.testModel = FactModel.fromJson(JSON.parse(data)); },
          err => console.log(err)
      );
   }
}

यदि सर्वर से कोई ऑब्जेक्ट आता है तो यह काम करता है, लेकिन मैं एक अवलोकन बनाने की कोशिश कर रहा हूं subscribe()जो स्थिर स्ट्रिंग के लिए दिए गए कॉल के साथ काम करेगा (ऐसा तब होता है जब testModelService.fetchModel()कोई यूयूआईडी प्राप्त नहीं होता है) इसलिए दोनों मामलों में सहज हैंडलिंग होती है।

Answer 1

शायद आप कक्षा की ofविधि का उपयोग करने की कोशिश कर सकते हैं Observable:

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';

public fetchModel(uuid: string = undefined): Observable<string> {
  if(!uuid) {
    return Observable.of(new TestModel()).map(o => JSON.stringify(o));
  }
  else {
    return this.http.get("http://localhost:8080/myapp/api/model/" + uuid)
            .map(res => res.text());
  }
}

Comments

वह बहोत अच्छा था! इसने काम कर दिया! मैं कई चीज़ों की कोशिश कर रहा था, जैसे कि Observable.from () आदि .. ऑब्ज़र्वेबल के लिए एपीआई प्रलेखन इस बिंदु पर सबसे साफ / सबसे उपयोगकर्ता के अनुकूल नहीं है! धन्यवाद :)

— मिखाइल माइकेलिडिस

एक बात यदि आप संस्करण 6 का उपयोग कर रहे हैं, तो आप इसके बजाय import { of } from 'rxjs';उपयोग और उपयोग कर रहे हैं । ofObservable.of

— vip

कोणीय v7.xx .map()के लिए आपको प्राप्त करने की आवश्यकता के परिणाम पर नहीं है .pipe(map((res:any) => res.json()))। यहाँ देखें: stackoverflow.com/a/35220045/986160

— Michail Michailidis

Answer 2

जुलाई 2018 तक और जारी करने का RxJS 6, मूल्य से एक ऑब्जर्वेबल प्राप्त करने का नया तरीका ofऑपरेटर को आयात करना है जैसे:

import { of } from 'rxjs';

और फिर मान से देखने योग्य बनाएं, जैसे:

of(someValue);

ध्यान दें, कि आपको Observable.of(someValue)वर्तमान में स्वीकृत उत्तर की तरह ही काम करना था । अन्य RxJS 6 परिवर्तनों पर यहाँ एक अच्छा लेख है ।

Comments

बहुत बहुत धन्यवाद, यह काम करता है

— सारा

Answer 3

कोणीय 2.0.0 के बाद से चीजें बदल गई हैं

import { Observable } from 'rxjs/Observable';
import { Subscriber } from 'rxjs/Subscriber';
// ...
public fetchModel(uuid: string = undefined): Observable<string> {
  if(!uuid) {
    return new Observable<TestModel>((subscriber: Subscriber<TestModel>) => subscriber.next(new TestModel())).map(o => JSON.stringify(o));
  }
  else {
    return this.http.get("http://localhost:8080/myapp/api/model/" + uuid)
            .map(res => res.text());
  }
}

.next()समारोह आपके ग्राहक पर बुलाया जाएगा।

Comments

मैं कोणीय 2.1.2 में चला गया हूं। पुराना तरीका अभी भी समर्थित है। क्या आप विस्तृत रूप से बता सकते हैं कि यह एक बेहतर समाधान क्यों है या यह सम्मेलन है? फिर मैं इसे अपने कोड में सभी जगहों पर बदलूंगा और फिर से स्वीकार करूंगा .. धन्यवाद

— Michail Michailidis

@MichailMichailidis, रेट्रोस्पेक्ट के एक महीने के साथ, यह मुझे लगता है कि दोनों समान रूप से मान्य हैं, मुख्य अंतर यह है कि थियरी के समाधान से आपको ofआरएक्सजे के फ़ंक्शन को आयात करने की आवश्यकता होती है , जैसेimport 'rxjs/add/observable/of'

— नील डे वेट

Answer 4

यह है कि आप स्थैतिक डेटा के लिए एक सरल अवलोकन कैसे बना सकते हैं।

let observable = Observable.create(observer => {
  setTimeout(() => {
    let users = [
      {username:"balwant.padwal",city:"pune"},
      {username:"test",city:"mumbai"}]

    observer.next(users); // This method same as resolve() method from Angular 1
    console.log("am done");
    observer.complete();//to show we are done with our processing
    // observer.error(new Error("error message"));
  }, 2000);

})

to subscribe to it is very easy

observable.subscribe((data)=>{
  console.log(data); // users array display
});

मुझे उम्मीद है कि यह उत्तर सहायक है। हम स्थैतिक डेटा के बजाय HTTP कॉल का उपयोग कर सकते हैं।

Comments

क्या आप टाइपो को observable.subscripe से observable.subscribe तक अपडेट कर सकते हैं

— सुधराशन

Answer 5

इस तरह आप डेटा से ऑब्जर्वेबल बना सकते हैं, मेरे मामले में मुझे शॉपिंग कार्ट बनाए रखने की आवश्यकता है:

service.ts

export class OrderService {
    cartItems: BehaviorSubject<Array<any>> = new BehaviorSubject([]);
    cartItems$ = this.cartItems.asObservable();

    // I need to maintain cart, so add items in cart

    addCartData(data) {
        const currentValue = this.cartItems.value; // get current items in cart
        const updatedValue = [...currentValue, data]; // push new item in cart

        if(updatedValue.length) {
          this.cartItems.next(updatedValue); // notify to all subscribers
        }
      }
}

Component.ts

export class CartViewComponent implements OnInit {
    cartProductList: any = [];
    constructor(
        private order: OrderService
    ) { }

    ngOnInit() {
        this.order.cartItems$.subscribe(items => {
            this.cartProductList = items;
        });
    }
}