选择的数据将触发图像答案

【问题标题】：Selected data will trigger the image选择的数据将触发图像
【发布时间】：2020-06-04 10:17:08
【问题描述】：

我想要做的是当我选择“工作室单元”时，工作室单元的图像将只显示工作室单元...... 问题是当我选择工作室单元时，图像仍然显示 3 图像，它应该显示工作室单元 iamge...

这是我的代码。 .html

<div style="margin-top: -10px"  *ngFor="let house of house_designs; let i - index">
      <div>
    <img src="{{url_asset}}{{house.photo_name}}">
  </div>
  </div>
  <button ion-button full (click)="design()">{{ switchbtn }}</button>
</ion-card>


<form [formGroup]="registerForm"(ngSubmit)="onSubmit()">
<ion-card>
  <ion-item no-lines>
      <ion-label color="primary">House Design:</ion-label>
      <ion-select 
        formControlName="house_design_id"  
        placeholder="Select house design"
         [(ngModel)]="qa_form.house_designs_id">
        <ion-option 
          value="{{house.id}}" 
          *ngFor="let house of house_designs; let i - index"
           name="house_design_id"  
           >{{house.description}}</ion-option>

      </ion-select>
  </ion-item>
</ion-card>

有人可以帮我吗...

【问题讨论】：

能否请您详细说明一下，因为我在代码中没有看到任何与“工作室单元”相关的内容？
我的错请点击图片 tnx..
尝试以下操作：将 onChange 函数绑定到“select”标签，并在事件更改时将 url 的值传递给其中。然后，您可以将该值分配给 .ts 文件中的变量，您可以使用该变量分配给 img 标记中的 src。
你能给我看例子吗@Mu
你可以这样使用它：FemaleMale 然后在你的页面中： onSelectChange(selectedValue: any) { var genderVariable = selectedValue; }

标签： ionic3 angular5 datatrigger eventtrigger ion-select

【解决方案1】：

我为您创建了一个工作示例。检查您创建的 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文件：

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

尝试更改下拉菜单，您将能够看到图像随着值的变化而变化。

【讨论】：