在Angular http方法中，在函数外部分配响应值

Question

user.component.ts

ngOnInit(): void
{
var data;
this.auth=this.cookie.get("auth");
this.servicefetch.ContactList(this.auth).subscribe
(
(response)=>
{
data=response;
},
(error)=>{console.log(error)}
);
}

serviceCRUD.service.ts

ContactList(auth:String)
{
const headers = { "content-type": "application/json", "Authorization": "Contacts " + auth };
return this.http.get<any>('http://localhost:8080/contacts', {headers});
}

在这里，我想将响应分配给另一个变量，比如data。但当我打印出数据时，我会得到未定义的数据。我认为这是因为这是异步的。我可以通过任何方式将其分配给可变数据

Answer 1

正如您所说，http调用是一个异步操作。

如果我们尝试低于

let data;
this.servicefetch.ContactList(this.auth).subscribe({
next: response => data = response
});
console.log(data);

数据将是未定义的，因为此代码是在返回响应之前执行的。

在角度上，处理上述问题的最佳方法是将可观测值分配给下面的变量示例

myData$ = this.servicefetch.ContactList(this.auth);

现在，在你的模板和各种操作中，你可以使用这个可观察的。例如，要在模板中显示数据，您可能有

<ng-container *ngIf='myData$ | async as data'>
// data is now available here
</ng-container>

在您的TS文件中，您可以订阅此变量并执行其他操作

myData$.subscribe({ next: (data) => console.log(data)})

Answer 2

您必须在Component类的作用域中声明状态变量。

export default App extends Component {
data: any;
ngOnInit(): void
{
this.auth=this.cookie.get("auth");
this.servicefetch.ContactList(this.auth).subscribe
(
(response)=>
{
this.data=response;
// call the next callback (store the token or go to next route)
},
(error)=>{console.log(error)}
);
}
}

你可以这样签入模板：

<div *ngIf="data">
data.yourProperty
</div>