下拉菜单 - 隐藏非选定选项和默认选项

Question

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

.html

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

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

    ...

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

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

试试这个

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>

两种方式都可以使用，如下图。

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

*ngIf="select=='pp1'"

由于我没有chart.js，我在component.ts中使用了虚拟数据

component.ts

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

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

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

Answer 3

@Suvethan Nantha，我试过了，但是我的图表是在初始化时填充的，当我使用 ng-if 时，我认为组件会去重新做值来填充图表，我不知道，但它不按照你帮助的方式工作..

@bereket gebredingle，那样它什么都不显示，我控制台记录它并且值是正确的..“barChart - true”但不显示任何内容..在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 和变量就越多