Question

我只想在单击按钮后才显示更改的文本值。文本值取决于输入字段，并使用[(NgModel)]="textValue"动态绑定到文本字段的输入值。我首先在输入框中输入一些ID号，它会直接更改我的文本。但是我只希望单击按钮并使用函数“ getChartsData（）”调用新的图表数据后，才更改带有“ ID值”的文本。

这是我的html的样子：

<input [(ngModel)]="monatConst" placeholder="Demonstrator-ID">
<button class="btn btn-danger float-xl-right mt-1" 
    (click) = "getChartsData()">  Call HTTP Request
  </button> 
<br>
<div *ngIf="monatConst">Chart für Demonstrator mit ID: {{monatConst}} </div><br>

<ngx-charts-bar-vertical
  [view]="view"
  [scheme]="colorScheme"
  [results]="dataArray"
  [gradient]="gradient"
  [xAxis]="showXAxis"
  [yAxis]="showYAxis"
  [legend]="showLegend"
  [showXAxisLabel]="showXAxisLabel"
  [showYAxisLabel]="showYAxisLabel"
  [xAxisLabel]="xAxisLabel"
  [yAxisLabel]="yAxisLabel">
</ngx-charts-bar-vertical>

如何最好地认识到只有在单击按钮并调用新的图表数据之后，才更改带有ID字段的文本？目前，我用ngModel两种方式绑定了ID变量，并通过数据绑定{{..}}

将其直接放入文本字段中

Answer 1

.html

 <input [(ngModel)]="monatConst" placeholder="Demonstrator-ID">
<button class="btn btn-danger float-xl-right mt-1" 
    (click) = "getChartsData();setText(monatConst)">  Call HTTP Request
  </button> 
<br>
<div *ngIf="Demonstrator_ID">Chart für Demonstrator mit ID: {{Demonstrator_ID}} </div><br>

.ts

   monatConst:any;
   Demonstrator_ID: any;

   setText(text){
      this.Demonstrator_ID=text;
    }

Answer 2

我找到了一个简单得多的解决方案，对我来说这很愚蠢;）：

<div *ngIf="dataArray?.length>0; else noChartBlock">
    Chart für Demonstrator mit ID: {{monatConst}}
<ngx-charts-bar-vertical
  [view]="view"
  [scheme]="colorScheme"
  [results]="dataArray"
  [gradient]="gradient"
  [xAxis]="showXAxis"
  [yAxis]="showYAxis"
  [legend]="showLegend"
  [showXAxisLabel]="showXAxisLabel"
  [showYAxisLabel]="showYAxisLabel"
  [xAxisLabel]="xAxisLabel"
  [yAxisLabel]="yAxisLabel">
</ngx-charts-bar-vertical>
</div>

<ng-template #noChartBlock>
  <b>There is no data for Demonstrator with ID: {{monatConst}} !</b>
</ng-template>

我只是将Text打包在ngIf选择器中，以便在找到内容时显示文本，否则转到else模板块...; P

角度检查按钮是否被单击

2 个答案: