Fatal编程技术网
  • angular/
  • Angular 角度10：如果选中所有复选框，则显示一些消息

Angular 角度10：如果选中所有复选框，则显示一些消息

angular

Angular 角度10：如果选中所有复选框，则显示一些消息,angular,Angular,我有一个基于Angular 10的项目 实际上情况是： 我给出了一个列表，其中用户通过单选按钮选择一个选项 例如：用户从给定列表中选择covid19 作为用户covid19。新冠病毒-19的症状将出现在我使用的[ngSwitch]中 所以我想显示，患者是否患有新冠病毒19取决于他的症状。我在症状中使用了复选框。用户也可以有两个以上的症状 我想要的是，如果用户选中一个框，我想显示一些消息，比如，如果用户选中所有框，他就患有新冠病毒-19 *我试过使用ngSwitch 问题是，如果用户直接选择第

我有一个基于Angular 10的项目

实际上情况是：

  • 我给出了一个列表，其中用户通过单选按钮选择一个选项

    例如：用户从给定列表中选择covid19

  • 作为用户covid19。新冠病毒-19的症状将出现在我使用的
    [ngSwitch]
    中

    • 所以我想显示，患者是否患有新冠病毒19取决于他的症状。我在症状中使用了复选框。用户也可以有两个以上的症状

    我想要的是，如果用户选中一个框，我想显示一些消息，比如，如果用户选中所有框，他就患有新冠病毒-19

    *我试过使用ngSwitch

    问题是，如果用户直接选择第四个框，他将显示新冠病毒-19呈阳性。 这是实现这一目标的正确方法还是可以通过其他方式实现

    列出的所有症状的顺序都是递增的。这意味着如果用户选择第一，他将是一些正常的问题。。。当他从顶部选择更多时，他将有很高的机会感染新冠病毒-19

    参加test.component.html

    <div class="container-fluid text-white bg-dark p-3">
  <div class="row">
      <div class="col-xs-12 col-lg-12 col-md-12">Hello [<i class='bx bx-plus-medical'></i><span style="color: red; font-weight: bolder;">RAHUL SINGH</span><i class='bx bx-plus-medical'></i>]</div>
  </div>
</div>


<div class="container mt-5">
  <div class="jumbotron">
      <h1 class="display-3">Hello, world!</h1>
      <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
      <hr class="my-4">
      <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
      <p class="lead">
        <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
      </p>
    </div>
    </div>



<!--Select your Disease-->
<div class="container">
  <div class="row">
    <div class="col-xs-6 col-md-6 col-lg-6">
    <fieldset class="form-group" (change)="setvalue($event)">
      <h3 class="font-weight-bold text-danger">Choose Your Disease</h3>
      <div class="form-check">
        <label class="form-check-label h4 text-success font-weight-bold">
          <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios1" value="covid19">
          [&nbsp;COVID-19&nbsp;]
        </label>
      </div>
      <div class="form-check">
      <label class="form-check-label">
          <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios2" value="two">
         two
        </label>
      </div>
     
    </fieldset>
    </div>
  <div class="col-xs-6 col-md-6 col-lg-6" [ngSwitch]="choose">
    <fieldset class="form-group">
      <legend>Checkboxes</legend>
      <div class="form-check">
        <label class="form-check-label" *ngSwitchCase="'covid19'">


         <!--symptom1-->
         <fieldset class="form-group"  >
         
          <div class="form-check" (change)="setvalue1($event)">
            <label class="form-check-label">
              <input class="form-check-input" type="checkbox" value="fever" >
              Fever or chills
            </label>
          </div>
          <div class="form-check" (change)="setvalue1($event)">
            <label class="form-check-label">
              <input class="form-check-input" type="checkbox" value="cough" >
              Cough
            </label>
          </div>
          <div class="form-check">
            <label class="form-check-label" (change)="setvalue1($event)">
              <input class="form-check-input" type="checkbox" value="short" >
              Shortness of breath or difficulty breathing
            </label>
          </div>
          <div class="form-check">
            <label class="form-check-label" (change)="setvalue1($event)">
              <input class="form-check-input" type="checkbox" value="body" >
              Muscle or body aches
            </label>
          </div>
          
        </fieldset>
         <!--end symtoms-->



        </label>
      </div>
      <div class="form-check">
        <label class="form-check-label" *ngSwitchCase="'two'">
          <input class="form-check-input" type="checkbox" value="">
          Option two is selected
        </label>
      </div>
     
    </fieldset>
  </div>
  </div>
</div>





<!--final result of disease-->
<div class="container" [ngSwitch]="choose1">
  <div class="row">
    <div class="col-sm-12 col-md-12 col-lg-12"  *ngSwitchCase="'fever'">
      <div class="list-group">
        <a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
          <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1 h3 text-success">>>>>May be some Normal Fever or flu.<<<<<</h5>
        
            <small>Take precautions</small>
          </div>
          <p class="mb-1">Just take one or two tabelts of paracetmol or taking some precautions</p>
          
        </a>
        <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
          <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1">You are noraml. just be in home</h5>
         
          </div>
          <p class="mb-1">Building a Healthy Community One Individual at a Time.</p>
 
        </a>
      </div>
    </div>
  </div>
</div>









<!--final result of disease-->
<div class="container" [ngSwitch]="choose1">
  <div class="row">
    <div class="col-sm-12 col-md-12 col-lg-12"  *ngSwitchCase="'cough'">
      <div class="list-group">
        <a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
          <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1 h3 text-success">>>>>Just make yourself home qrantined and drink some tea or khadha<<<<<</h5>
        
            <small>Take precautions</small>
          </div>
          <p class="mb-1">Just take one or two tabelts of paracetmol or taking some precautions</p>
          
        </a>
        <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
          <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1">You are noraml. just be in home</h5>
         
          </div>
          <p class="mb-1">Building a Healthy Community One Individual at a Time.</p>
 
        </a>
      </div>
    </div>
  </div>
</div>

<div class="container" [ngSwitch]="choose1">
  <div class="row">
    <div class="col-sm-12 col-md-12 col-lg-12"  *ngSwitchCase="'short'">
      <div class="list-group">
        <a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
          <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1 h3 text-danger">>>>>Must take your covid19 test. <<<<<</h5>
        
            <small>Take precautions</small>
          </div>
          <p class="mb-1">Just take one or two tabelts of paracetmol or taking some precautions</p>
          
        </a>
        <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
          <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1">You are noraml. just be in home</h5>
         
          </div>
          <p class="mb-1">Building a Healthy Community One Individual at a Time.</p>
 
        </a>
      </div>
    </div>
  </div>
</div>


<div class="container" [ngSwitch]="choose1">
  <div class="row">
    <div class="col-sm-12 col-md-12 col-lg-12"  *ngSwitchCase="'body'">
      <div class="list-group">
        <a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
          <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1 h3 text-danger">>>>>You tested poitive for covid19.....be relax..... and take your medicine<<<<<</h5>
        
            <small>Take precautions</small>
          </div>
          <p class="mb-1">Just take one or two tabelts of paracetmol or taking some precautions</p>
          
        </a>
        <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
          <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1">You are noraml. just be in home</h5>
         
          </div>
          <p class="mb-1">Building a Healthy Community One Individual at a Time.</p>
 
        </a>
      </div>
    </div>
  </div>
</div>

<br>
<br>

    
你好[拉胡尔·辛格]
你好，世界！

    这是一个简单的英雄单元，一个简单的jumbotron风格的组件，用于唤起对特色内容或信息的额外关注
    

    
它使用用于排版和间距的实用程序类在较大的容器中分隔内容
    

    

    
选择你的疾病
[新冠病毒-19]
二
复选框
发烧或发冷
咳嗽
呼吸急促或呼吸困难
肌肉或身体疼痛
选择选项二
    谢谢你，这并不难。假设你有一个变量，实际上是一个数组

    symptom:boolean[]=[]
    您可以在输入中使用，例如

    //cough
<input class="form-check-input" type="checkbox" [(ngModel)]="symptom[2]">
    然后可以在.html中使用*ngIf

    <div *ngIf="symptomsCount==10">You has 10 symptoms</div>

    您有10种症状
    当您检查10个症状时，会自动显示消息“您有10个症状”

    创建StackBlitzdemo@KaustubhBadrike：事实上，我是新来的。。。那么请告诉我什么是斯塔克比尔茨Demo@Nehasingh，Angular的原理是将.ts中的变量与.html联系起来。您应该使用[（ngModel）]或ReactiveForms，而不是一系列（更改）事件。在此之后，您可以轻松地使用条件来关联所有variables@Eliseo：事实上，我是个新手…你能更详细地解释一下…如何做到这一点？？？？和 
    <div *ngIf="symptomsCount==10">You has 10 symptoms</div>