下拉列表 - 隐藏非选定选项和默认选项

Question

我正在使用chartJS，除了显示默认图表外，我还只想显示组合框上选择的图表。 问题是我无法显示默认图表，也无法隐藏未选择的值。 我在Init上填写了图表，以便在打开页面图表组件时获得数据。 我使用功能onChange传递画布图表的id来显示它，但无法隐藏其他功能。请注意，我可以添加更多图表类型，例如点图等... 最好的方法是什么？ 我现在的代码是：

。.html

我不知道data-ng-model="barChart">是否适用于打字稿或该版本的angular..但目的是在打开图表页面时默认barChart如图表所示

<select (change)="onChange($event.target.value)" data-ng-model="barChart">
<option value="barChart" selected>{{'Bar Chart' | translate }}</option>
<option value="chart2">{{'Line Chart' | translate }}</option>
<option value="rdr">{{'Radar Chart' | translate }}</option>
<option value="pp1">{{'Pie Chart' | translate }}</option>
</select>
<div class="card-block">
<canvas id="barChart" hidden="true"></canvas>
<canvas id="chart2" hidden="true"></canvas>
<canvas id="rdr" hidden="true"></canvas>
<canvas id="pp1" hidden="true"></canvas>
</div>

.ts

ngOnInit() 
{
var ctx = document.getElementById("barChart");
var cts = document.getElementById("chart2");
var radar = document.getElementById("rdr");
var pie = document.getElementById("pp1");
// values to fill the chart 
...
this.barChart = new Chart(ctx, {
type: 'bar',
data: {
...
}
...
}
}
onChange(deviceValue) {
this.select = deviceValue;
document.getElementById(deviceValue).hidden = false;
}
...

编辑： 这段代码开始时没有显示任何内容，然后当我在 Combobox 上选择一个图表时，它会显示图表，但是当我选择其他时，尽管选择了"显示"，但它不会隐藏另一个图表。

Answer 1

使用角度绑定来隐藏和显示图表。

.ts

chartTypeSelected: string = '';

---

<canvas id="barChart" [hidden] = "! chartTypeSelected == 'bar' "> </canvas>
<canvas id="rdr" [hidden] = "! chartTypeSelected == 'radar' "> </canvas>
<canvas id="chart2" [hidden] = "! chartTypeSelected == 'chart2' "> </canvas>
...

然后在改变时

onChange(deviceValue) {
this.chartTypeSelected = deviceValue;
}

---

我希望这有所帮助。

Answer 2

试试这个

组件.html

<select (change)="onChange($event.target.value)" ng-model="barChart">
<option value="barChart" selected>Bar Chart</option>
<option value="chart2">Line Chart</option>
<option value="rdr">Radar Chart</option>
<option value="pp1">Pie Chart</option>
</select>
<div class="card-block">
<canvas *ngIf="select=='barChart'" id="barChart"></canvas>
<canvas *ngIf="select=='chart2'" id="chart2" ></canvas>
<canvas *ngIf="select=='rdr'"  id="rdr"></canvas>
<canvas *ngIf="select=='pp1'" id="pp1" ></canvas>
</div>

可以同时使用两种方式，如下所示。

*ngIf="select==='pp1'"
*ngIf="select=='pp1'"

由于我没有图表.js所以我在 component.ts 中使用了虚拟数据

组件.ts

select='barChart';
barCharts=['barChart','chart2','rdr','pp1'];
onChange(deviceValue) {
this.select = deviceValue;
console.log(this.select);
}

我希望这对你有帮助。如果您有任何问题，请告诉我。

Answer 3

@Suvethan Nantha，我试过了，但我的图表是在 init 上填充的，当我使用 ng-if 时，我认为组件会去重新做值来填充图表，我不知道，但它不像你帮助的那样工作。

@bereket gebredingle，这样它就不会显示任何内容，我控制台记录它并且值是正确的。 "条形图 - 真实"但不显示任何内容。 在 html 上，我添加了 {{barChartSelected}} 来检查值，它给出：true..

这是显示选定和隐藏其他的简单方法吗，无论有多少？

谢谢你的回答

编辑：它以这种方式工作，但是如果我需要添加，我拥有的图表越多，其他图表就越多(和变量等可能会在不久的将来感到困惑......

.ts：

barChartSelected : boolean = false;
radarChartSelected : boolean = false;
chart2Selected : boolean = false;
pp1ChartSelected : boolean = false;
ngOnInit() {
//default chart showed
this.barChartSelected = true;
....
}
onChange(deviceValue) {
console.log(deviceValue);
if(deviceValue === "barChart")
{
this.barChartSelected = true;
this.chart2Selected = false;
this.radarChartSelected = false;
this.pp1ChartSelected = false;
}
else if(deviceValue === "chart2")
{
this.barChartSelected = false;
this.chart2Selected = true;
this.radarChartSelected = false;
this.pp1ChartSelected = false;
}
else if(deviceValue === "rdr")
{
this.barChartSelected = false;
this.chart2Selected = false;
this.radarChartSelected = true;
this.pp1ChartSelected = false;
}
else if(deviceValue === "pp1")
{
this.barChartSelected = false;
this.chart2Selected = false;
this.radarChartSelected = false;
this.pp1ChartSelected = true;
}
}

。.html：

<select (change)="onChange($event.target.value)" data-ng-model="barChart">
<option value="barChart" selected>{{'Bar Chart' | translate }}</option>
<option value="chart2">{{'Line Chart' | translate }}</option>
<option value="rdr">{{'Radar Chart' | translate }}</option>
<option value="pp1">{{'Pie Chart' | translate }}</option>
</select>

<div class="card-block">
<canvas id="barChart" [hidden] = "!barChartSelected"></canvas>
<canvas id="chart2" [hidden] = "!chart2Selected"></canvas>
<canvas id="rdr" [hidden] = "!radarChartSelected"></canvas>
<canvas id="pp1" [hidden] = "!pp1ChartSelected"></canvas>
</div>

有效，但它很有效，我屁股的图表越多，我必须添加的其他 if 和变量就越多