如何在 Angular 中正确使用 ngif

Question

我在 github 上找到了 angular 项目，我试图继续研究它以便我可以学习，但我一直坚持如何正确使用 ngIf。

所以我在 chart.model.ts 文件中有我的三种图表类型，我不确定谁可以访问我的 design.component.ts 文件中的数据，以便我可以使文本框仅在用户显示在下拉列表中选择文本。

现在，当我运行项目但没有执行任何操作时，三个图表类型选项会显示在下拉列表中，而且我在 ngIf 上也出现错误提示

“'ChartType' 类型上不存在属性 'text'。”

如果有人能教我或帮助我，我将不胜感激。

chart.model.ts

export class ChartUtil {
    public static getChartTypeDisplay(type: ChartType): string {
        switch (type) {
            case ChartType.chart:
                return "Charts";
            case ChartType.text:
                return "Text";
            case ChartType.grid:
                return "Grid";
            default:
                return "unknown";
        }
    }

export enum ChartType {
    chart = 1,
    text,
    grid
}
}

design.component.ts

import { ChartType } from 'src/app/chart.model';


 chartTypes: ChartType;


  setupTypes() {
    keys = Object.keys(ChartDataType);
    for (let i = 0; i < (keys.length / 2); i++) {
      this.dataTypes.push({ value: parseInt(keys[i]), display: ChartUtil.getChartDataTypeDisplay(parseInt(keys[i])) })
    }
}

design.component.html

        <ng-container *ngIf="chart.chartTypes == chartTypes.text">
            <mat-form-field appearance="fill">
                <mat-label>Text</mat-label>
                <input matInput />
            </mat-form-field>

我无法在 stackblitz 上上传完整的项目，但我通过 https://stackblitz.com/edit/angular-ivy-dmf3vn 上传了这些文件中的所有代码

Answer 1

ng-If 的工作原理是，如果条件为真，则在 ng-if 中编写的代码将在 HTML 中呈现/显示。如果条件为假，则代码将不会被渲染/显示。因此，根据您的条件将值设置为 true 或 false。

 <ng-container *ngIf="displayChartInfo">
            <mat-form-field appearance="fill">
                <mat-label>Text</mat-label>
                <input matInput />
            </mat-form-field>

在你的 ts 中，

 displayChartInfo:boolean = false;
    public static getChartTypeDisplay(type: ChartType): string {
            switch (type) {
                case ChartType.chart:
                    this.displayChartInfo =true;;
                      break;
                case ChartType.text:
                     this.displayChartInfo =true;;
                      break;
                case ChartType.grid:
                     this.displayChartInfo =true;;
                      break;
                default:
                    this.displayChartInfo =false;;
                  break;

            }
        }