如何从 Observable 获取数据?
How to get data from observable?
我正在尝试从请求中获取一些数据。我有一个可观察的函数,它给我 .subscribe
内部的数据,但是每当我尝试在外部获取数据时(在 class 中定义的变量中)它会 return 我 undefined
很烦人
Component.ts:
import { ProjectService } from '../services/project.service';
@Component({
selector: 'app-project-loader',
templateUrl: './project-loader.component.html',
styleUrls: ['./project-loader.component.css']
})
export class ProjectLoaderComponent implements OnInit {
projects:any;
constructor(private projectService: ProjectService) { }
ngOnInit(): void {
this.getProjects();
}
getProjects(){
this.projectService.getProjects().subscribe(data=>{
this.projects= data;
})
}
}
Component.html:
{{projects[0].id}}
html目前只是为了测试海豚,所以只有1行。仅供参考,在可观察函数中编辑的数据 return 是一个 json 数组。
数组示例:
{
"id": "REDACTED",
"projectName": "REDACTED",
"projectId": "REDACTED"
},
{
"id": "REDACTED",
"projectName": "REDACTED",
"projectId": "REDACTED"
}
]
(编辑的是来自私人数据库的字符串 :P)
我自己解决了。我只需要使用 *ngFor
来封装这样的项目:
<div *ngFor=" let project of projects">
<button class="list-group-item list-group-item-action" (click)="openProject(project.id)" >{{project.projectName}}</button>
</div>
我正在尝试从请求中获取一些数据。我有一个可观察的函数,它给我 .subscribe
内部的数据,但是每当我尝试在外部获取数据时(在 class 中定义的变量中)它会 return 我 undefined
很烦人
Component.ts:
import { ProjectService } from '../services/project.service';
@Component({
selector: 'app-project-loader',
templateUrl: './project-loader.component.html',
styleUrls: ['./project-loader.component.css']
})
export class ProjectLoaderComponent implements OnInit {
projects:any;
constructor(private projectService: ProjectService) { }
ngOnInit(): void {
this.getProjects();
}
getProjects(){
this.projectService.getProjects().subscribe(data=>{
this.projects= data;
})
}
}
Component.html:
{{projects[0].id}}
html目前只是为了测试海豚,所以只有1行。仅供参考,在可观察函数中编辑的数据 return 是一个 json 数组。
数组示例:
{
"id": "REDACTED",
"projectName": "REDACTED",
"projectId": "REDACTED"
},
{
"id": "REDACTED",
"projectName": "REDACTED",
"projectId": "REDACTED"
}
]
(编辑的是来自私人数据库的字符串 :P)
我自己解决了。我只需要使用 *ngFor
来封装这样的项目:
<div *ngFor=" let project of projects">
<button class="list-group-item list-group-item-action" (click)="openProject(project.id)" >{{project.projectName}}</button>
</div>