Выбранные данные активируют изображение - PullRequest
Новая
       77

Выбранные данные активируют изображение

0 голосов
/ 20 февраля 2020

что я хочу сделать, это когда я выбираю «студийный блок», изображение студийного блока будет отображать только студийный блок ... проблема в том, что когда я выбираю студийный блок, изображение по-прежнему показывает 3 изображения, которые оно должно показать студийный блок iamge ...

введите описание изображения здесь

вот мой код. . html

image

Может кто-нибудь помочь мне tnx ...

1 Ответ

0 голосов
/ 20 февраля 2020

Я создал рабочий пример для вас. Проверьте StackBlitz, который вы создали. Я внес изменения, чтобы вы могли это понять.

https://angular-c7x7gc.stackblitz.io

Сначала файл .ts: 

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
 url:any;
 house_designs:any=[]; 

  ngOnInit(){
    this.house_designs = 

   [
    {
      "id": 1,
      "name": "Studio",
      "url": "https://images.unsplash.com/photo-1502759683299-cdcd6974244f?auto=format&fit=crop&w=440&h=220&q=60",

    },
    {
      "id": 2,
      "name": "1 BHK",
      "url": "https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293__340.jpg",
    }
  ]

this.url = this.house_designs[0].url;
  } //ngOnInit

  onSelectChange(selectedValue: any) 
  { 
    this.url = selectedValue; 
  } 
}

Сейчас html file: 

<div>
<img src="{{url}}">
</div>

<select (change)="onSelectChange($event.target.value)" > 
  <option [value]="data.url" *ngFor="let data of house_designs">{{data.name}}</option>
</select>

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

...