条件HTML元素仅临时显示

Angular的新手，所以我可能在这里缺少一些基本知识。我有一个应用程序组件，可以对本地存储中存储的数据进行测试，然后显示结果。基于运行测试时执行的函数期间设置的布尔变量有条件地显示结果。但是，结果显示最多一秒钟然后消失。

我尝试删除条件条件，结果仍然只是闪烁。我的猜测是，当页面自动重新加载时，测试结果（存储在变量中）本身会重置。但是，使用ng serve时禁用自动重新加载并不能解决问题。

下面的相关代码。

html：

<div>
    <form id='chiSquareForm'>
        <label for='dieType'>Die Type:</label>
        <div *ngFor="let dieType of dieTypes">
            <input type="radio" name="dieType" value="{{dieType}}" (change)="dieTypeChangeHandler($event)"><i>{{dieType}}</i>
        </div>
        <button (click) = "runChiSquare()">Run Test</button>
    </form>
</div>>
<div *ngIf = "displayResults">
    <h1>Results</h1>
    <p>{{testResults}}</p>
</div>

和相关component.ts：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-chi-square-form',
  templateUrl: './chi-square-form.component.html',
  styleUrls: ['./chi-square-form.component.css']
})
export class ChiSquareFormComponent implements OnInit {

  selectedDieType: string = '';

  testResults = '';

  displayResults;

  //create critical value table (only including degrees of freedom for dice, and probability of .95
  criticalValues = {
    3: 7.815,
    5: 11.070,
    7: 14.067,
    9: 16.919,
    19: 30.144
  }

  constructor() { }

  ngOnInit() {
  }

  runChiSquare() {

    //set displayResults to true to show conditional HTML 
    
    this.displayResults = true;

    
    //some code to calculate chi
    
    
    //check chi against critical value
    
      let criticalValue = this.criticalValues[degreesOfFreedom];
    
      let fair = true;
      if (chi > criticalValue) {
      fair = false
      }
      if (fair === false) {
      output = "Your die is so not fucking fair!";
      } else {
      output ="Your die is fair, blame something else!"
    }
}
  this.testResults = output;
    return output;
    };
}