如何从 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>