Preselected Element when using *ngFor-CodePudding

I have following Code which will not select a Element, when loading the Component.

 <option  (click)="getSelectdDropdown(1, 'Python'); addNewItemFramework(1); checkForm()" [selected]="this.formGroup.controls['frameworkControl'].value=='1'">Python</option>
            <option (click)="getSelectdDropdown(2, 'Ruby'); addNewItemFramework(2); checkForm()" [selected]="this.formGroup.controls['frameworkControl'].value=='2'">Ruby</option>
            <option (click)="getSelectdDropdown(3, 'C#'); addNewItemFramework(3); checkForm()" [selected]="this.formGroup.controls['frameworkControl'].value=='3'">C#</option>

When I use *ngFor It always select the first Element. How should be the Code with ngFor?

<option *ngFor="let title of frameworkArray" >{{title}} {{this.frameworkArray.indexOf(title)}}</option>

The Framework Array is filled in the TypeScript Code. So there are Elements in it

CodePudding user response：

That's not how you're supposed to approach this.

You're supposed to have a form control tied to your select, and angular will do anything by itself.

Here is an example :

CodePudding user response：

You can declare an empty value option before the *ngFor options.

Below is the modified code of the same.

Your Code:

<option *ngFor="let title of frameworkArray" >
{{title}} {{this.frameworkArray.indexOf(title)}}</option>

Modified Code:

<option selected value=""></option>
<option *ngFor="let title of frameworkArray" >
{{title}} {{this.frameworkArray.indexOf(title)}}</option>

You can add this line of code <option selected value=""></option>, before the *ngFor options like above.

If the necessary output is achieved by this code, please upvote the answer, Thank you.