Example:
When we have
test: { a: string }[];
in class and in template
<button *ngFor="let item of test" >
{{item}}
</button>
the item is properly typed and autocomplete shows available members, e.g. item.a
. It also properly shows ‘not defined’ errors e.g. for item.b
.
However, if we have
test: ReadonlyArray<{ a: string }>;
in class, there is no autocomplete for available members, e.g. item.a
. Much worse, item.b
silently passes validation, seems that the type information is lost and the item interpreted as ‘any’.
Note, outside of ngfor test
itself is properly typed even in second case and shows autocomplete members and validation errors for {{test[0].x}}
.