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

Question

我有一个基于 Angular 10 的项目。

其实条件是：

1. 我已经给出了一个列表，用户可以通过单选按钮选择一个选项。

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

2. 作为用户 covid19。我使用 [ngSwitch] 时会出现 covid-19 的症状。

所以我想要显示，根据他的症状，这个人是否患有 covid-19。我在症状中使用了复选框。用户也可以有两个或多个症状

我想要的只是如果用户选中一个框，我想显示一些消息，例如如果用户选择了所有框，他就患有 covid-19

*我已尝试使用 ngSwitch。

问题是，如果用户直接选择第 4 个框...他将显示 covid-19 阳性。 这是实现这一目标的正确方法还是可以通过其他方式完成

列出的所有症状都按升序排列。这意味着如果用户首先选择，他将遇到一些正常的问题......当他从顶部选择更多时，他将很有可能患上 covid-19

take-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>

谢谢

Answer 1

Neha，这并不难。想象一下，你有一个变量，嗯，真的是一个数组

symptom:boolean[]=[]

您可以在输入中使用，例如

//cough
<input class="form-check-input" type="checkbox" [(ngModel)]="symptom[2]">

当您签入 .html 时，.ts 中的变量 sypmtom[2] 的值为 true；当您取消签入 .html 时，ts 中的变量症状 [2] 的值为 false

这被称为“双重绑定”方式，是 Angular 的“哲学”：将视图（.html）和模型（.ts 中的变量）关联起来。好处是，您可以知道患者有多少症状。我使用吸气剂

get symptomsCount()
{
    return this.symptom.filter(x=>x).length
}

然后你可以在 .html 中使用 *ngIf

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

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