IS the syntax to pass the index element from an array wrong in Angular

Question

I am trying to show the filenames from an array into UI. Below is my Angular code:

 <div *ngFor="let file of myFiles">
      **{{ file.name }}**
 </div>

The code for AppComponent is:

export class AppComponent {
  public myFiles: Array<{ [key: string]: string | number }> = [
    { name: "First.txt", size: 500 },
    { name: "Second.jpg", size: 100 }
  ];

  public clearModel(): void {
    this.myFiles = [];
  }
}

I want to display the name parameter from my Array on the list. I get the error:"Property 'name' comes from an index signature, so it must be accessed with ['name'].ngtsc(4111)"

I have tried {{file[name]}} which returns error: Property 'name' does not exist on type 'AppComponent'

You should check your compiler options - There is nothing wrong with your code. — user13258211
– user13258211, Commented Aug 11, 2022 at 9:31

Eugene · Accepted Answer · 2022-08-11 09:29:39Z

1

You should pass a string: file['name'].

Or you can disable this check in tsconfig.json:

"compilerOptions": {
  "noPropertyAccessFromIndexSignature": false
}

answered Aug 11, 2022 at 9:29

Eugene

1,5371 gold badge12 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kel Over a year ago

Great. It worked. That file['name'] is new to me. I thought I need to pass it like file[name] which failed. Thanks, Eugene.

Collectives™ on Stack Overflow

IS the syntax to pass the index element from an array wrong in Angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related