কৌণিকের মধ্যে এইচটিপি-র অনুরূপ স্থিতিশীল ডেটা থেকে একটি পর্যবেক্ষণযোগ্য কীভাবে তৈরি করবেন?


121

আমার এই পরিষেবাটি রয়েছে এমন একটি পরিষেবা রয়েছে:

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()কোনও ইউইউইড গ্রহণ না করে) তাই উভয় ক্ষেত্রেই নির্বিঘ্নে হ্যান্ডলিং রয়েছে।

উত্তর:


151

সম্ভবত আপনি ক্লাসের 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());
  }
}

2
সেটি অসাধারণ ছিল! এটা কাজ করেছে! আমি Observable.from () ইত্যাদির মতো অনেকগুলি বিষয় চেষ্টা করছিলাম Ob ধন্যবাদ :)
মাইকেল মাইখাইলিডিস

44
আপনি যদি সংস্করণ 6 ব্যবহার করেন তবে একটি জিনিস , এর পরিবর্তে আপনি import { of } from 'rxjs';ব্যবহার ও ব্যবহার করতে পারেন । ofObservable.of
ভিআইপি

2
কৌণিক v7.xx এর জন্য প্রাপ্তির .map()ফলাফলের কোনও নেই তাই আপনাকে করা দরকার .pipe(map((res:any) => res.json()))। এখানে দেখুন: স্ট্যাকওভারফ্লো.com
a/35220045

62

জুলাই 2018 এবং প্রকাশের হিসাবে RxJS 6, কোনও মান থেকে একটি পর্যবেক্ষণযোগ্য পাওয়ার নতুন উপায়টি ofঅপারেটরটিকে এভাবে আমদানি করা :

import { of } from 'rxjs';

এবং তারপরে মান থেকে পর্যবেক্ষণযোগ্য তৈরি করুন:

of(someValue);

দ্রষ্টব্য, আপনি Observable.of(someValue)বর্তমানে গৃহীত উত্তরের মতো করতে হবে । অন্যান্য আরএক্সজেএস 6 টি পরিবর্তন সম্পর্কে এখানে একটি ভাল নিবন্ধ রয়েছে ।


আপনাকে অনেক ধন্যবাদ, এই কাজ করে
সারাহ

19

অ্যাঙ্গুলার ২.০.০ থেকে জিনিসগুলি পরিবর্তিত হয়েছে বলে মনে হচ্ছে

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()ফাংশন আপনার গ্রাহক আহ্বান করা হবে না।


2
আমি কৌণিক ২.১.২ এ স্থানান্তরিত হয়েছি .. পুরানো উপায়টি এখনও সমর্থিত বলে মনে হচ্ছে .. আপনি কেন দয়া করে এটি আরও ভাল সমাধান বা এটি কনভেনশন? তারপরে আমি আমার কোডের সমস্ত জায়গায় এটি পরিবর্তন করব এবং আমি পুনরায় গ্রহণ করব .. ধন্যবাদ
মাইকেল

7
@ মিচাইল মিচাইলিডিস, পূর্ববর্তী মাসের এক মাসের সাথে আমার কাছে উভয়ই সমানভাবে বৈধ বলে মনে হচ্ছে, মূল পার্থক্য হ'ল থিয়েরির সমাধানটির জন্য আপনাকে ofআরএক্সজেএসের কাজটি আমদানি করতে হবে, যেমনimport 'rxjs/add/observable/of'
নিল ডি ওয়েট

12

এভাবেই আপনি স্থিতিশীল ডেটার জন্য একটি সাধারণ পর্যবেক্ষণযোগ্য তৈরি করতে পারেন।

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 কল ব্যবহার করতে পারি।


আপনি কি পর্যবেক্ষণযোগ্য.সউসপ্রেপ থেকে পর্যবেক্ষনের জন্য টাইপো আপডেট করতে পারেন? সাবস্ক্রাইব করুন
সুধারন

3

এইভাবে আপনি ডেটা থেকে পর্যবেক্ষণযোগ্য তৈরি করতে পারেন, আমার ক্ষেত্রে আমার শপিং কার্ট বজায় রাখা দরকার:

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;
        });
    }
}
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.