Angular7 - Как использовать Observable и добавить атрибуты - PullRequest
Новая
       44

Angular7 - Как использовать Observable и добавить атрибуты

0 голосов
/ 04 мая 2019

Я хотел бы добавить атрибут в мой наблюдаемый объект проекта.Этот атрибут должен быть случайным изображением из другого случайного проекта.Таким образом, мы можем перемещаться из проекта случайным образом.

Я изо всех сил пытаюсь работать с Observable в Angular 7

Проект имеет несколько изображений, и из проекта я хотел бы получить случайное изображение из другого проекта.

data 

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']},
];

service 

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}}

-

Я хотел бы добавить в getProject имя случайного изображения из другого проекта, используя genRdm(max, id);

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

пример, если я выберу проект1, я бы хотел выбрать случайный проект2 или проект3 с помощью genRdm(numberOfProject, currentProjectId) и получить случайное изображение из него. 

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

, затем выбрать случайное изображение из проекта2 и прикрепить его кgetProject (но я не знаю, как это сделать) 

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

В project.component я мог бы иметь выбранный проект со случайным изображением из другого проекта

1 Ответ

0 голосов
/ 05 мая 2019

Наконец-то я нашел рабочее решение для своего сайта, пожалуйста, поделитесь своими мыслями.

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 на стороне сервера, но я не знаю, как это сделать.

...