NG-ZORRO/ng-zorro-antd

Autocomplete -> nz-auto-optgroup -> dont work with new angular control flow (@for)

Opened this issue · 4 comments

Lavos96 commented

Reproduction link

https://stackblitz.com/edit/ng-zorro-antd-ivy-w1gcxk?file=src%2Fapp%2Fapp.component.ts

Steps to reproduce

Listing nz-autocomplete elements does not work if we use the new control-flow from Angular (i.e. @for syntax) and group options using nz-auto-optgroup tag. The old syntax works without problems (i.e. *ngFor)

What is expected?

New sytax will work.

What is actually happening?

New syntax dont work.

Environment Info
ng-zorro-antd 17.1.0
Browser Chrome 121.0.6167.185
ParsaArvanehPA commented

Hi @Lavos96 ,
Your stackblitz link is broken; can you provide another one?

Nicoss54 commented

@Lavos96 after investigating a little bit, it seems it's not a problem with Ng Zorro itself

Here is your code with the older way

<nz-auto-option
							  *ngFor="let option of groups.groups"
								[nzLabel]="option.name"
								[nzValue]="option.id">
								{{ option.name }}
							</nz-auto-option>

if you want to migrate to new code flow syntax you should migrate like this

@for (option of groups.groups; track option.id) {
							<nz-auto-option
								[nzLabel]="option.name"
								[nzValue]="option.id">
								{{ option.name }}
							</nz-auto-option>
					}

if you do that you exemple work as expected

Lavos96 commented

@Nicoss54 after long investigation, it turned out that angularCompilerOptions -> preserveWhitespaces: true option in tsconfig.json is responsible for that. I was unable to reproduce that in stackblitz. There is an reported issue in angular repo for that: angular/angular#54077

  • 👍1