Summary: A dropdown list contains objects, unsure how to capture multiple attributes of selected object.
Current Implementation:
I have successfully created a dropdown list that displays the details of an object retrieved through an API call:
<mat-form-field class="testSection">
<mat-label>Available Test Results:</mat-label>
<mat-select [(ngModel)]="testName" name="testName" ngDefaultControl>
<mat-option *ngFor="let test of tests" [value]="test.testName">
{{ test.testName + test.testType + test.results + test.cohortId}}
</mat-option>
</mat-select>
</mat-form-field>
In my component.ts file, I have declared testName as a string:
testName: string
With this setup, I am able to retrieve the correct test.testName based on user selection from the dropdown list (associated with the specific test clicked by the user).
Requirement:
I aim to enhance this functionality. Suppose I want to extract both test.name and test.results, and store them in variables testName and testResults for use in subsequent API calls. How can I achieve this?
I attempted changing [value]="test.testName" to
[value]="test.testName, test.testResults"[(ngModel)]="testMap", where testMap is defined in the component as: testMap: Map<string, string>Unfortunately, this approach did not yield the desired outcome, as only test.testName was captured while test.testResults were neglected.