Html 下拉菜单-隐藏未选择的选项和默认选项

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

.html

我不知道data ng model=barChart是否适用于typescript或angular的该版本。。但其目的是在打开图表页面时将条形图默认为显示的图表

编辑： 这段代码以未显示任何内容开始，然后当我在combobox上选择一个图表时，它会显示该图表，但当我选择其他图表时，尽管选择了show selected，但不会隐藏另一个

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

我希望这有帮助。

试试这个

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

因为我没有chart.js，所以我在component.ts中使用了虚拟数据

组件技术

---

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

@Suvethan Nantha，我尝试过，但我的图表是在init上填充的，当我使用ng If时，我认为组件会去重新填充图表中的值，我不知道，但它不会像您帮助的那样工作

@Berket gebredingle，这样它不会显示任何内容，我会记录它，并且值是正确的。。条形图-正确，但不显示任何内容。。在html中，我添加了{{barChartSelected}}来检查值，它给出：true

这是一种显示所选内容并隐藏其他内容的简单方法吗，无论有多少

谢谢你的回答

编辑：它是这样工作的，但是如果我需要添加图表和变量等，我拥有的图表越多，其他的就越多。。也许在不久的将来会感到困惑

.ts:

.html：

---

工作正常，但它很有效，我通过的图表越多，我必须添加的其他if和变量就越多

给我几分钟时间，我会给你一个解决方案。我编辑了这篇文章，给出了我的代码的信息。图表都很好地用新值更新，这里的问题是只显示图表类型的条形图、饼图、雷达图等。。在组合框上选择。我可以将它们全部隐藏并显示所选的一个，但从不隐藏任何。。因此，我以页面上显示的所有图表结束。你能检查我发布的答案，看看你现在是否可以修复它或删除我的帖子。我尝试过，如果，但这就像图表的数据未定义，我可以根据该数据进行选择，但它没有显示任何内容，只有图表的画布：当我在下拉列表中选择元素时，元素被创建和替换，但图表没有显示..我尝试过，但它不起作用。。添加了在.ts上选择的条形图，ngInit为false。在html上添加了画布上显示的[hidden]，并在更改时进行切换。。但没有任何迹象表明贝雷克特，它是这样工作的，但如果我添加另一个图表，我必须添加更多的“其他如果”。这是一种只显示所选内容并隐藏其余内容的方式吗？谢谢，我很高兴听到你这么说。现在等我，我会带着最好的解决方案回来的。@Break现在怎么样？我已经编辑了我的答案，现在是有效的。我已经用最好的方式实现了它。请检查我的答案。不客气。那么为什么不选择我的答案作为正确答案呢-我的朋友，谢谢你的时间和帮助；

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

    ...

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

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

select='barChart';
barCharts=['barChart','chart2','rdr','pp1'];
onChange(deviceValue) {

            this.select = deviceValue;
            console.log(this.select);
}

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

    }

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