app.component.html：
<div class="d-flex justify-content-center align-items-center">
<div class="form-group type">
<div class="group">
<label class="input-label" for="type" >Select Type<span class="text-danger pl-1">*</span>
</label><br>
<select class="form-control decorated" name="role" id="type" >
<option value="">Select the type</option>
<option value="option1" >option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="other">Other</option>
</select>
</div>
</div>
</div>
<div>1</div>
<div>2</div>
<div>3</div>
如果我選擇option1，那么我需要顯示 1st div。如果我選擇option2然后我需要顯示 2nd div。
謝謝
uj5u.com熱心網友回復：
您需要selectedOption在您的組件中系結到元素ngModel上的更改的屬性。<select>
然后，您可以使用 將此屬性系結到<div>元素*ngIf。
<div class="d-flex justify-content-center align-items-center">
<div class="form-group type">
<div class="group">
<label class="input-label" for="type" >Select Type<span class="text-danger pl-1">*</span>
</label><br>
<select class="form-control decorated" name="role" id="type" [(ngModel)]="selectedOption">
<option value="">Select the type</option>
<option value="option1" >option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div *ngIf="selectedOption === 'option1'">1</div>
<div *ngIf="selectedOption === 'option2'">2</div>
<div *ngIf="selectedOption === 'option3'">3</div>
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
public selectedOption;
}
StackBlitz 示例
uj5u.com熱心網友回復：
<div >
<div >
<div >
<label for="type">Select Type<span >*</span>
</label><br>
<select name="role" id="type"
(change)="selectedValue = $event.target.value">
<option value="">Select the type</option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="other">Other</option>
</select>
</div>
</div>
</div>
<div *ngIf="selectedValue == 'option1'">1</div>
<div *ngIf="selectedValue == 'option2'">2</div>
<div *ngIf="selectedValue == 'option3'">3</div>
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
public selectedOption;
constructor() { }
ngOnInit(): void {}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/465671.html
標籤：有角度的
上一篇：點擊時2個不同類之間的角度交換