如何使用 angular 重用 HTML 中的变量

Question

I'm very new to Angular and devleopping web app.

With that said I have a bit of an issue, I have a nested json document with many categories/subcategories and I would like for users to search in this json via a HTML web page with dropdownlists.

I used this to display the first categories in the dropdown list:

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

But then I need to search into Data (which is my main json file) to get the subcategory. This would look like this: Data."what the user picked in the first dropdownlist"

So I tried this:

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

Problem is, the html code uses selectedOption as a constant string not as a variable.

My appComponent.ts code looks like this (pretty simple):

export class AppComponent {
  
  selectedOption : any;

  selectedOption2 : any;

  title = 'GuideDRC';

  Data = DRCdata;

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

So my question is: is there any way to make the html code "understand" that selectedOption is a variable and not a constant string?

Sorry for this basic question but I'm struggling because many tutorials are with Javascript, thanks in advance !

The Data file is json and look something like this:

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

It's using "selectedOption" as an index, while you want the contents of your variable selectedOption to be the index. The syntax changes:

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

Also - since selectedOption is initially undefined , this will definitely throw an error. You can do two things.

Only render your second dropdown if selectedOption is set. *ngIf="selectedOption" is enough since it's truthy.

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

Your second option is to set selectedOption initially, and have your getKeys function check if Data contains [selectedOption]

selectedOption = ""
// no type needed

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