Угловая проверка, была ли нажата кнопка - PullRequest
0 голосов
/ 26 июня 2018

Я хочу отображать измененное текстовое значение, только если была нажата кнопка. Текстовое значение зависит от поля ввода и динамически привязывается к входному значению текстового поля с помощью [(NgModel)]="textValue" ... Сначала я ввожу некоторый идентификационный номер в поле ввода, и это напрямую меняет мой текст. Но я хочу, чтобы текст с «ID-значением» изменялся только после того, как я нажал кнопку и вызвал новые данные диаграмм с моей функцией «getChartsData ()».

Вот так выглядит мой 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 изменяется только после нажатия кнопки и вызова новых данных диаграмм? На данный момент я связал ID-переменную двумя способами с помощью ngModel и поместил ее непосредственно в текстовое поле с привязкой данных {{..}}

Ответы [ 2 ]

0 голосов
/ 26 июня 2018

Я нашел гораздо более простое решение, это было довольно глупо с моей стороны;):

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

Я просто упаковал свой текст внутри селектора ngIf, чтобы он отображал текст, если что-то было найдено, в противном случае он идет в блок шаблона else ...; P

0 голосов
/ 26 июня 2018

.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;
    }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...