Hoping someone can help!

I am working on a test app which you need to enter various values based on a time, like a time sheet almost.

The first 2 select fields are retrieved via an API in a single call with projects and tasks, which looks like this:

[
    {
        "project": "First Project",
        "code": "123",
        "tasks": [
            {
                "code": "1",
                "name": "Some Task"
            }
        ]
    },
    {
        "project": "Project 6",
        "code": "456",
        "tasks": [
            {
                "code": "99",
                "name": "A task 1"
            },
            {
                "code": "100",
                "name": "A Task 2"
            }
        ]
    },
    {
        "project": "Project 2",
        "code": "5678",
        "tasks": [
            {
                "code": "1",
                "name": "Task 1"
            },
            {
                "code": "2",
                "name": "Task 2"
            }
        ]
    }
]

I have successfully retrieved the data from the API and populated the first select box like this:

<th scope="row" >
    <select  aria-label="Select a project">
    <option disabled>[SELECT PROJECT]</option>
    <option [value]="timecode.code" [selected]="timecode.code == entry.project" *ngFor="let timecode of timecodes">({{ timecode.code }}) {{ timecode.project }}</option>
</select>

This works as expected, my issue is with populating hte second select with the calues based on the first select in the following ways:

1. on load - The select shoudl be populated and selected with the correct value
2. on change of the select or on a new line populate with the data based on the first. The payload for the select I am not too worried about it is just the dynamically selecting from the array based upon the project.

I have tried creating a function and passing the project code in:

getTasksForProject(projectCode: string): any {
    let project = this.timecodes.filter(proj => proj.code == projectCode);
    console.log(project)
    return project.tasks;
}

<td scope="row" >
    <select  aria-label="Select a task" [disabled]="!entry.project">
    <option disabled>[SELECT TASK]</option>
    <option [value]="task.code" *ngFor="let task of getTasksForProject(entry.project)">({{ task.code }}) {{ task.code }}</option>
    </select>
</td>

But this returnd nothing?

Also this will have multiple entry lines which will be dynamically added.

Any advice much appreciated!

Regards

Richard

CodePudding user response：

First issue I'm seeing here is that in your for loop you are passing

entry.project

try entry.code instead. since in your getTasksForProject method you use code for the filtering.

    <option [value]="task.code" *ngFor="let task of getTasksForProject(entry.code)">({{ task.code }}) {{ task.code }}</option>