góc 2 cách trả lại dữ liệu từ đăng ký

Question

Đây là điều tôi muốn làm.

@Component({ 
    selector: "data", 
    template: "<h1>{{ getData() }}</h1>" 
}) 

export class DataComponent{ 
    this.http.get(path).subscribe({ 
     res => return res; 
    }) 
} 

Nếu getData được gọi bên trong DataComponent, Bạn có thể đề nghị gán nó vào một biến như this.data = res và sử dụng i like {{data}} .Nhưng tôi cần thiết để sử dụng như {{getData}} cho purpose.Please riêng tôi gợi ý cho tôi?

Answer 1

Bạn chỉ không thể trả lại giá trị trực tiếp vì đó là cuộc gọi không đồng bộ. Cuộc gọi không đồng bộ có nghĩa là cuộc gọi đang chạy trong nền (thực tế được lên lịch để thực hiện sau) trong khi mã của bạn tiếp tục thực thi.

Bạn cũng không thể trực tiếp có mã như vậy trong lớp học. Nó cần phải được chuyển vào một phương thức hoặc hàm tạo.

gì bạn có thể làm không phải là để subscribe() trực tiếp nhưng sử dụng một nhà điều hành như map()

export class DataComponent{ 
    someMethod() { 
     return this.http.get(path).map(res => { 
     return res.json(); 
     }); 
    } 
} 

Bên cạnh đó, bạn có thể kết hợp nhiều .map với quan sát giống như đôi khi điều này cải thiện rõ ràng mã và giữ những điều riêng biệt. Ví dụ:

validateResponse = (response) => validate(response); 

parseJson = (json) => JSON.parse(json); 

fetchUnits() { 
    return this.http.get(requestUrl).map(this.validateResponse).map(this.parseJson); 
} 

Bằng cách này một quan sát được sẽ trả lại người gọi có thể đăng ký để

export class DataComponent{ 
    someMethod() { 
     return this.http.get(path).map(res => { 
     return res.json(); 
     }); 
    } 

    otherMethod() { 
     this.someMethod().subscribe(data => this.data = data); 
    } 
} 

Người gọi cũng có thể ở lớp khác. Ở đây nó chỉ là ngắn gọn.

data => this.data = data 

và

res => return res.json() 

là mũi tên chức năng. Chúng tương tự như các chức năng bình thường. Các chức năng này được chuyển đến subscribe(...) hoặc map(...) để được gọi từ vị trí quan sát được khi dữ liệu đến từ phản hồi. Đây là lý do tại sao dữ liệu không thể được trả lại trực tiếp, bởi vì khi someMethod() hoàn tất, dữ liệu chưa được nhận.

Answer 2

Hai cách tôi biết:

export class SomeComponent implements OnInit 
{ 
    public localVar:any; 

    ngOnInit(){ 
     this.http.get(Path).map(res => res.json()).subscribe(res => this.localVar = res); 
    } 
} 

này sẽ gán kết quả vào biến cục bộ khi thông tin được trả về giống như trong một lời hứa. Sau đó, bạn chỉ cần thực hiện {{ localVar }}

Một cách khác là có thể quan sát dưới dạng cục bộVariable.

export class SomeComponent 
{ 
    public localVar:any; 

    constructor() 
    { 
     this.localVar = this.http.get(path).map(res => res.json()); 
    } 
} 

Bằng cách này bạn đang phơi bày một quan sát được lúc này bạn có thể làm trong html của bạn là sử dụng AsyncPipe {{ localVar | async }}

Hãy thử nó ra và cho tôi biết nếu nó hoạt động. Ngoài ra, kể từ khi góc 2 là khá mới, cảm thấy tự do để bình luận nếu một cái gì đó là sai.

Hy vọng điều này sẽ giúp

Answer 3

Tôi đã sử dụng cách này rất nhiều thời gian ...

@Component({ 
 
    selector: "data", 
 
    template: "<h1>{{ getData() }}</h1>" 
 
}) 
 

 
export class DataComponent{ 
 
    this.http.get(path).subscribe({ 
 
     DataComponent.setSubscribeData(res); 
 
    }) 
 
} 
 

 

 
static subscribeData:any; 
 
static setSubscribeData(data):any{ 
 
    DataComponent.subscribeData=data; 
 
    return data; 
 
}

sử dụng từ khóa tĩnh và tiết kiệm thời gian của bạn ... đây hoặc bạn có thể sử dụng biến tĩnh hoặc trực tiếp trở về đối tượng mà bạn muốn .... hy vọng nó sẽ giúp bạn .. hạnh phúc mã hóa. ..