[typescript] Angular에서 http와 유사한 정적 데이터에서 Observable을 만드는 방법은 무엇입니까?
이 방법이있는 서비스가 있습니다.
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()
uuid를받지 못할 때 발생 함) 과 함께 작동하는 관찰 가능 항목을 만들려고 하므로 두 경우 모두 원활하게 처리됩니다.
답변
아마도 클래스 의 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());
}
}
답변
2018 년 7 월 및의 릴리스 RxJS 6
부터 값에서 Observable을 가져 오는 새로운 방법은 of
다음과 같이 연산자 를 가져 오는 것입니다.
import { of } from 'rxjs';
다음과 같이 값에서 관찰 가능 항목을 만듭니다.
of(someValue);
Observable.of(someValue)
현재 허용되는 답변에서 같은 작업을 수행해야했습니다 . 다른 RxJS 6 변경 사항에 대한 좋은 기사가 여기에 있습니다 .
답변
Angular 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()
함수는 가입자에게 호출됩니다.
답변
이것이 정적 데이터에 대한 간단한 관찰 가능 항목을 만드는 방법입니다.
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 호출을 사용할 수 있습니다.
답변
이렇게하면 데이터에서 Observable을 만들 수 있습니다. 제 경우에는 장바구니를 유지해야합니다.
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;
});
}
}