如何在 select 一个来自 select 框的值之后显示隐藏文本？

Question

.html .html

<div class="column">
      <div>
        <mat-form-field>
          <mat-label>Subject</mat-label>
          <mat-select formControlName="Subject">
            <mat-option *ngFor="let Subject of Subjects" [value]="Subject.value">
              {{Subject.viewValue}}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </div>
      <div>
        <mat-form-field>
          <mat-label>Grade</mat-label>
          <mat-select formControlName="Grade">
            <mat-option *ngFor="let Grade of Grades" [value]="Grade.value">
              {{Grade.viewValue}}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </div>
      <div>
        <mat-form-field>
          <mat-label>Type</mat-label>
          <mat-select formControlName="Type">
            <mat-option *ngFor="let Type of Types" [value]="Type.value">
              {{Type.viewValue}}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </div>

//label is here //标签在这里

<div [hidden] =  "showLable() === true ? false: true">
  <p >Maximum Price exceeding</p> 
</div>

.ts .ts

export class NewLectureComponent implements OnInit {
  isNotify: boolean;

      showLable(){
         this.isNotify = true;
      }
}

I want to show the label subject, grade, type this angular material select boxes after filled!我要显示label科目，等级，填写后键入此angular 材料select 框！
when i filled subject grade type these fields label want to show当我填写科目成绩类型时，这些字段 label 想要显示

Answer 1

You can use the ngIf Directive that can be used to show or hide the html elements when required.您可以在需要时使用ngIf指令来显示或隐藏 html 元素。

<div *ngIf="isNotify">
  <p >Maximum Price exceeding</p> 
</div>

So when the isNotify value will be true the html element would be added into the doucument if false it would be added as a binding(a template).因此，当 isNotify 值为真时，html 元素将被添加到文档中，如果为假，它将作为绑定（模板）添加。

Answer 2

Please try this code,To how to show the hidden text after select a value from select Box?请尝试此代码，如何显示 select 后的隐藏文本来自 select 框的值？

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Show Hide Elements Using Select Box</title>
<style>
    .box{
        color: #fff;
        padding: 20px;
        display: none;
        margin-top: 20px;
    }
    .red{ background: #ff0000; }
    .green{ background: #228B22; }
    .blue{ background: #0000ff; }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    $("select").change(function(){
        $(this).find("option:selected").each(function(){
            var optionValue = $(this).attr("value");
            if(optionValue){
                $(".box").not("." + optionValue).hide();
                $("." + optionValue).show();
            } else{
                $(".box").hide();
            }
        });
    }).change();
});
</script>
</head>
<body>
    <div>
        <select>
            <option>Choose Color</option>
            <option value="red">Red</option>
            <option value="green">Green</option>
            <option value="blue">Blue</option>
        </select>
    </div>
    <div class="red box">You have selected <strong>red option</strong> so i am here</div>
    <div class="green box">You have selected <strong>green option</strong> so i am here</div>
    <div class="blue box">You have selected <strong>blue option</strong> so i am here</div>
</body>
</html>

I hope this code will be useful.我希望这段代码有用。

Thank you.谢谢你。

如何在 select 一个来自 select 框的值之后显示隐藏文本？

问题描述

.html .html

.ts .ts

2 个解决方案

解决方案1
1 2020-07-22 06:21:21

解决方案2
1 2020-07-22 06:28:02

如何在 select 一个来自 select 框的值之后显示隐藏文本？

问题描述

.html .html

.ts .ts

2 个解决方案

解决方案1 1 2020-07-22 06:21:21

解决方案2 1 2020-07-22 06:28:02

解决方案1
1 2020-07-22 06:21:21

解决方案2
1 2020-07-22 06:28:02