Question

我是Angular的新手，我敢肯定这是一个非常基本的问题，但是我想显示与特定SymptomID匹配的症状列表。我有以下代码检查特定症状是否为特定类型，但是当类型不正确时，代码仍会在其位置输出空白项目符号。

<h1>Symptoms</h1>
<h2> {{symptomtypes[0].Description}}</h2>
<li *ngFor="let symptom of symptoms">
    <p *ngIf="(symptom.SymptomTypeID == 1)"> {{symptom.Description}}</p>
</li>
<h2> {{symptomtypes[1].Description}}</h2>
<li *ngFor="let symptom of symptoms">
    <p *ngIf="(symptom.SymptomTypeID == 2)"> {{symptom.Description}}</p>
</li>
<h2> {{symptomtypes[2].Description}}</h2>
<li *ngFor="let symptom of symptoms">
    <p *ngIf="(symptom.SymptomTypeID == 3)"> {{symptom.Description}}</p>
</li>

我希望列表输出如下：
症状类型1

症状类型1
症状类型1
症状类型1

症状类型2
症状类型2
症状类型2
症状类型2

症状类型3
症状类型3
症状类型3
症状类型3

但是相反，我得到了类似的内容：
症状类型1
空白
空白
症状类型1

症状类型2
症状类型2
空白
症状类型2

症状类型3
症状类型3
空白
空白

Answer 1

您的代码不是显示值的理想方法，但是对于这种特殊情况。我想您正在寻找的解决方案是。

<h2> {{symptomtypes[2].Description}}</h2>
<li *ngFor="let symptom of symptoms">
    <p *ngIf="(symptom.SymptomTypeID == 3) && symptom.Description"> {{symptom.Description}}</p>
</li>

Answer 2

您需要知道，<div mathjax> $$ f\\left(-2\\right) $$ </div>的每个迭代都是在应用了*ngFor的html元素上创建的（请参见docs）。因此，您的条目为空。

在您的情况下，我建议您使用pipe来过滤数组。

*ngFor

在您的html中：

@Pipe({ name: 'filterSymptom' })
export class FilterSymptomPipe implements PipeTransform {
    transform(symptoms: Symptom[], id: number) {
        return symptoms.filter(s => s.SymptomTypeID  === id);
    }
}

通常，为了改善您的代码，我建议您执行以下操作：

<li *ngFor="let symptom of symptoms | filterSymptom: 3">
    <p"> {{symptom.Description}}</p>
</li>

通过这种方式，您可以防止使用硬编码索引。

Answer 3

我想您正在寻找的解决方案是

<h1>Symptoms</h1>
<h2> Symptom Type 1</h2>
<div *ngFor="let symptom of symptoms">
  <li *ngIf="(symptom.SymptomTypeID == 1)&& (symptom.Description)">
    {{symptom.Description}}
  </li>
</div>
<h2> Symptom Type 2</h2>
<div *ngFor="let symptom of symptoms">
  <li *ngIf="(symptom.SymptomTypeID == 2)&& (symptom.Description)">
    {{symptom.Description}}
  </li>
</div>
<h2> Symptom Type 3</h2>
<div *ngFor="let symptom of symptoms">
  <li *ngIf="(symptom.SymptomTypeID == 3) && (symptom.Description)">
    {{symptom.Description}}
  </li>
</div>

遍历带有条件的对象时，如果不匹配则显示空项目符号

3 个答案: