所选数据将触发图像

Question

我想做的是，当我选择"工作室单元"时，工作室单元的图像将只显示工作室单元。。。问题是，当我选择工作室单元时，图像仍然显示3个图像，它应该显示工作室单元iamage。。。

在此处输入图像描述

这是我的密码。.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吗。。。

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

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