如何在 HTML 和 angular 中重用变量

Question

我对 Angular 和开发网络应用程序还很陌生。

话虽如此，但我遇到了一些问题，我有一个包含许多 categories/subcategories 的嵌套 json 文档，我希望用户通过HTML 带有下拉列表的网页。

我用它来显示下拉列表中的第一个类别：

<select class="custom-select" [(ngModel)]="selectedOption" id='Problem'>
          <option value="" disabled selected="selected"> Pick a problem </option>
          <option *ngFor="let data1 of getKeys(Data)" [ngValue]="data1" id='data1'> {{data1}} </option>
        </select>

但随后我需要搜索数据（这是我的主要 json 文件）以获取子类别。这看起来像这样：数据。“用户在第一个下拉列表中选择的内容”

所以我尝试了这个：

<select class='custom-select' [(ngModel)]="selectedOption2" id='Category'>
          <option value="" disabled selected="selected"> pick a category </option>
          <option *ngFor="let data2 of getKeys(Data.selectedOption)" [ngValue]="data2"> {{data2}} </option>
        </select>

问题是，html 代码使用 selectedOption 作为常量字符串而不是变量。

我的 appComponent.ts 代码如下所示（非常简单）：

export class AppComponent {
  
  selectedOption : any;

  selectedOption2 : any;

  title = 'GuideDRC';

  Data = DRCdata;

getKeys(obj){
  return Object.keys(obj)
}

所以我的问题是：有什么方法可以让 html 代码“理解”selectedOption 是一个变量而不是常量字符串？

抱歉这个基本问题，但我很挣扎，因为很多教程都与 Javascript 相关，在此先感谢！

数据文件是 json，看起来像这样：

{
   "First Problem": {
         "First category of first problem": {
                  "To Do" : "Something to do"
                  "Who to call" : "Phone Number"
          "Second category of first problem": {
                   And so on...
   "Second problem":{ ....

Answer 1

它使用 "selectedOption" 作为索引，而您希望变量 selectedOption 的内容作为索引。语法更改：

<option *ngFor="let data2 of getKeys(Data[selectedOption])" [ngValue]="data2"> {{data2}} </option>

此外 - 由于 selectedOption 最初是 undefined，这肯定会引发错误。你可以做两件事。

如果设置了 selectedOption，则只呈现第二个下拉菜单。 *ngIf="selectedOption" 足够了，因为它是真实的。

<select class='custom-select' [(ngModel)]="selectedOption2" id='Category' *ngIf="selectedOption">
          <option value="" disabled selected="selected"> pick a category </option>
          <option *ngFor="let data2 of getKeys(Data[selectedOption])" [ngValue]="data2"> {{data2}} </option>
</select>

您的第二个选择是最初设置 selectedOption，然后让您的 getKeys 函数检查 Data 是否包含 [selectedOption]

selectedOption = ""
// no type needed

getKeys(index: string) {
    return Data.hasOwnProperty(index) ? Data[index] : {};
}

如何在 HTML 和 angular 中重用变量

How to reuse a variable in HTML with angular

list

typescript

dropdown

angular