Mat-Select 옵션에 따라 입력 상자를 표시하는 방법

아흐메드

개인 고객과 조직 고객의 두 가지 옵션으로 구성된 매트 선택이 있습니다. 드롭 다운에서 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;
  }

누군가 내가 뭘 잘못하고 있는지 설명하고 올바른 방법을 찾는 데 도움을 줄 수 있습니까?

Prashant Pimpale

나는 이것을 좋아한다 :

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

Stackblitz

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

사용자 입력에 따라 선택 옵션을 정렬하는 방법

분류에서Dev

첫 번째 <select> 옵션에 따라 두 번째 <select>를 채우는 방법

분류에서Dev

<mat-select>에서 자리 표시 자에 색상을 지정하는 방법은 무엇입니까?

분류에서Dev

Rspec 3.4에서 사용자 입력에 따라 여러 옵션을 스텁 / 모의하는 방법

분류에서Dev

셀레늄 웹 드라이버 C #에 옵션을 표시하기 위해 <select> 요소를 클릭하는 방법은 무엇입니까?

분류에서Dev

<JSP> 선택 상자 옵션을 사용하여 다른 입력 텍스트 상자를 표시하는 방법

분류에서Dev

입력 필드의 값에 따라 span 태그에 텍스트를 표시하는 방법

분류에서Dev

드롭 다운에서 선택한 옵션에 따라 텍스트 필드를 숨기거나 표시하는 방법은 무엇입니까?

분류에서Dev

jQuery를 사용하여 텍스트 상자 입력에 따라 드롭 다운 목록에서 옵션 선택

분류에서Dev

Wordpress에서 좌표에 따라 사용자를 표시하는 방법은 무엇입니까?

분류에서Dev

<select>에서 사용자 선택에 따라 Angular2에 입력 표시

분류에서Dev

입력 태그에서 쉼표를 누른 후 선택 태그에 옵션을 표시하는 방법

분류에서Dev

선택한 옵션에 따라 인스턴스 메서드를 호출하는 방법은 무엇입니까?

분류에서Dev

선택한 옵션에 따라 텍스트를 변경하는 방법은 무엇입니까?

분류에서Dev

사용자가 Drupal 7의 웹 양식에 입력 한 조건에 따라 티저 (필드)를 표시하는 방법은 무엇입니까?

분류에서Dev

특정 옵션에 대해 Mat-Select의 선택한 값을 되 돌리는 방법은 무엇입니까?

분류에서Dev

HTML 옵션 상자에 쿼리 결과를 표시하는 방법은 무엇입니까?

분류에서Dev

sweetalert에서 두 가지 옵션을 선택하고 해당 옵션에 따라 조치를 취하는 방법은 무엇입니까?

분류에서Dev

Django 관리자에서 다른 선택 태그의 옵션에 따라 선택 태그 옵션을 변경하는 방법은 무엇입니까?

분류에서Dev

Django 관리자에서 다른 선택 태그의 옵션에 따라 선택 태그 옵션을 변경하는 방법은 무엇입니까?

분류에서Dev

JAVASCRIPT / BOOTSTRAP- 첫 번째 선택 옵션에 따라 다른 선택에서 옵션을 자동 선택하는 방법은 무엇입니까?

분류에서Dev

Json 객체의 값을 Mat-Select에 표시하는 방법

분류에서Dev

Java-사용자에게 파일을 입력하라는 메시지를 표시하는 방법

분류에서Dev

AngularJS Material Select 옵션 그룹에 표시된 텍스트를 사용자 지정하는 방법은 무엇입니까?

분류에서Dev

사용자 입력에 따라 다른 동작을 수행하는 방법

분류에서Dev

사용자 입력에 따라 다른 동작을 수행하는 방법

분류에서Dev

수신자가 메시지를 입력하고 브라우저에 표시하는 방법

분류에서Dev

입력 필드의 변경에 따라 상태를 업데이트하는 방법은 무엇입니까?

분류에서Dev

Excel : 연령과 성별에 따라 상위 3 개의 "승자"를 표시하는 방법은 무엇입니까?

Related 관련 기사

  1. 1

    사용자 입력에 따라 선택 옵션을 정렬하는 방법

  2. 2

    첫 번째 <select> 옵션에 따라 두 번째 <select>를 채우는 방법

  3. 3

    <mat-select>에서 자리 표시 자에 색상을 지정하는 방법은 무엇입니까?

  4. 4

    Rspec 3.4에서 사용자 입력에 따라 여러 옵션을 스텁 / 모의하는 방법

  5. 5

    셀레늄 웹 드라이버 C #에 옵션을 표시하기 위해 <select> 요소를 클릭하는 방법은 무엇입니까?

  6. 6

    <JSP> 선택 상자 옵션을 사용하여 다른 입력 텍스트 상자를 표시하는 방법

  7. 7

    입력 필드의 값에 따라 span 태그에 텍스트를 표시하는 방법

  8. 8

    드롭 다운에서 선택한 옵션에 따라 텍스트 필드를 숨기거나 표시하는 방법은 무엇입니까?

  9. 9

    jQuery를 사용하여 텍스트 상자 입력에 따라 드롭 다운 목록에서 옵션 선택

  10. 10

    Wordpress에서 좌표에 따라 사용자를 표시하는 방법은 무엇입니까?

  11. 11

    <select>에서 사용자 선택에 따라 Angular2에 입력 표시

  12. 12

    입력 태그에서 쉼표를 누른 후 선택 태그에 옵션을 표시하는 방법

  13. 13

    선택한 옵션에 따라 인스턴스 메서드를 호출하는 방법은 무엇입니까?

  14. 14

    선택한 옵션에 따라 텍스트를 변경하는 방법은 무엇입니까?

  15. 15

    사용자가 Drupal 7의 웹 양식에 입력 한 조건에 따라 티저 (필드)를 표시하는 방법은 무엇입니까?

  16. 16

    특정 옵션에 대해 Mat-Select의 선택한 값을 되 돌리는 방법은 무엇입니까?

  17. 17

    HTML 옵션 상자에 쿼리 결과를 표시하는 방법은 무엇입니까?

  18. 18

    sweetalert에서 두 가지 옵션을 선택하고 해당 옵션에 따라 조치를 취하는 방법은 무엇입니까?

  19. 19

    Django 관리자에서 다른 선택 태그의 옵션에 따라 선택 태그 옵션을 변경하는 방법은 무엇입니까?

  20. 20

    Django 관리자에서 다른 선택 태그의 옵션에 따라 선택 태그 옵션을 변경하는 방법은 무엇입니까?

  21. 21

    JAVASCRIPT / BOOTSTRAP- 첫 번째 선택 옵션에 따라 다른 선택에서 옵션을 자동 선택하는 방법은 무엇입니까?

  22. 22

    Json 객체의 값을 Mat-Select에 표시하는 방법

  23. 23

    Java-사용자에게 파일을 입력하라는 메시지를 표시하는 방법

  24. 24

    AngularJS Material Select 옵션 그룹에 표시된 텍스트를 사용자 지정하는 방법은 무엇입니까?

  25. 25

    사용자 입력에 따라 다른 동작을 수행하는 방법

  26. 26

    사용자 입력에 따라 다른 동작을 수행하는 방법

  27. 27

    수신자가 메시지를 입력하고 브라우저에 표시하는 방법

  28. 28

    입력 필드의 변경에 따라 상태를 업데이트하는 방법은 무엇입니까?

  29. 29

    Excel : 연령과 성별에 따라 상위 3 개의 "승자"를 표시하는 방법은 무엇입니까?

뜨겁다태그

보관