Question

我想向我的Project Observable Object添加一个属性。此属性应该是来自其他随机项目的随机图像。这样，我们可以从项目中随机导航。

我正努力在Angular 7中使用Observable

项目有多个图像，并且我想从项目中获得其他图像的随机图像。

数据

const Project =[
  { id: 1, name: 'project1', imgs:['a.jpg','b.jpg','c.jpg']},
  { id: 2, name: 'project2', imgs:['e.jpg','f.jpg','h.jpg']},
  { id: 3, name: 'project3', imgs:['j.jpg','k.jpg','g.jpg']},
  { id: 4, name: 'project4', imgs:['v.jpg','x.jpg','y.jpg']},
  { id: 5, name: 'project5', imgs:['z.jpg','u.jpg','p.jpg']},
];

服务

getProject(id: number): Observable<Project> {
  const url = `${this.projectUrl}/${id}`;
  return this.http.get<Project>(url).pipe(
    catchError(this.handleError<Project>(`getProject id=${id}`))
  );
}

project.component

getProject(): void {
    const id = +this.route.snapshot.paramMap.get('id');
    this.projecService.getProject(id)
        .subscribe(project => this.project = project);
}

project.component.html

我想访问{{project.randomImg}}

-

我想使用genRdm(max, id);

在getProject中添加来自另一个项目的随机图像的名称。

genRdm(max, id):number {
  var num = Math.floor(Math.random() * (max - 1 + 1)) + 1;
  return (num === id ) ? this.generateRandom(1, max) : num;
}

例如，如果我选择project1，我想使用genRdm(numberOfProject, currentProjectId)随机选择project2或project3，并从中获取随机图像。

genRdm(5,1) ==> 2 (project2)

然后从project2中选择随机图像并将其附加到getProject（但我不知道该怎么做）

genRdm(numbersOfImg,0) ==> example f.jpg

在project.component中，我将能够从其他项目中获得带有随机图像的所选项目

Answer 1

最后，我为我的网站找到了一个可行的解决方案，请分享您的想法。

project.service.ts

getRandomImg(id: number){
  var nId = this.generateRandom(5, id);
  const url = `${this.projectUrl}/${nId}`;
  return this.http.get<Project>(url);
}

generateRandom(max, id):number {
  var num = Math.floor(Math.random() * (max - 1 + 1)) + 1;
  return (num === id ) ? this.generateRandom(1, max) : num;
}

project.component.ts

ngOnInit():void{
    this.getProject();
}

getProject(): void {
    this.route.params.pipe(
        switchMap((params: Params) => this.projectService.getProject(+params['id']))
    )
    .subscribe(project => {
        this.project = project;
        this.projectService.getRandomImg(project.id)
        .subscribe(projectRnd =>{
            let rnd = this.projectService.generateRandom(projectRnd.imgs.length,0);
            this.randomImg = {projectShortname:projectRnd.shortname, projectId:projectRnd.id, path:rnd+'.jpg'};
         });
    });

}

但是理想情况下，随机的东西应该在服务器端的getProject中，但是我不知道该怎么做。

Angular7-如何使用Observable和添加属性

1 个答案: