개인 고객과 조직 고객의 두 가지 옵션으로 구성된 매트 선택이 있습니다. 드롭 다운에서 Ind Cust를 선택하면 이름, 성 및 고객 ID의 세 가지 옵션이 표시됩니다. 하지만 조직 고객을 선택하면 조직 이름과 조직 ID를 볼 수 있습니다. 모든 HTML 코드가 준비되었지만 선택에 따라 옵션을 표시 할 수 없습니다.
HTML 코드 :
<mat-form-field>
<mat-label>Select an option</mat-label>
<mat-select [(value)]="selected">
<mat-option value="indCust">IndividualCustomer</mat-option>
<mat-option value="orgCust">Organizational Customer</mat-option>
</mat-select>
</mat-form-field>
<div class="row" *ngIf="indCust; orgCust">
// Code for Input Box of Individual Customer
</div>
<ng-template #orgCust >
//Code for dropdown of Organization Customer
</ng-template>
Typescript 코드
selected = '';
indCust: Boolean ;
if(this.selected == 'indCust'){
this.indCust = true;
} else {
this.indCust = false;
}
누군가 내가 뭘 잘못하고 있는지 설명하고 올바른 방법을 찾는 데 도움을 줄 수 있습니까?
나는 이것을 좋아한다 :
HTML 코드 :
<mat-form-field>
<mat-label>Select an option</mat-label>
<mat-select>
<mat-option *ngFor="let obj of list" (click)="get(obj)" [value]="obj"> {{obj.viewValue}}</mat-option>
</mat-select>
</mat-form-field>
<span *ngIf="isSelected">
<div class="row" *ngIf="indCust">
Code for Input Box of Individual Customer
<mat-form-field class="example-full-width">
<input matInput placeholder="Individual Customer" >
</mat-form-field>
</div>
<div class="row" *ngIf="!indCust">
Code for Combo Box of Organizational Customer
<mat-form-field>
<mat-label>Favorite food</mat-label>
<mat-select>
<mat-option *ngFor="let food of foods" [value]="food.value">
{{food.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</span>
TS 코드 :
import { Component } from '@angular/core';
@Component({
selector: 'select-overview-example',
templateUrl: 'select-overview-example.html',
styleUrls: ['select-overview-example.css'],
})
export class SelectOverviewExample {
list: any[] = [
{ value: 'indCust', viewValue: 'IndividualCustomer' },
{ value: 'orgCust', viewValue: 'Organizational Customer' }
];
foods: any[] = [
{ value: 'steak-0', viewValue: 'Steak' },
{ value: 'pizza-1', viewValue: 'Pizza' },
{ value: 'tacos-2', viewValue: 'Tacos' }
];
isSelected: boolean = false;
indCust: Boolean = undefined;
get(data) {
this.isSelected = true;
if (data.value == 'indCust') {
this.indCust = true;
console.log(data)
} else {
this.indCust = false;
}
}
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다