0

is there a way to compose the key value of an object in typescript from strings? Here's an example:

object[index].key=value

should be,

object[index].["String".array[i]]=value

The following does not work:

{{ object[index].{{"string".concat(Variable[index])}} }} <-- the rendering is perfectly fine but the execution is missing

I'm trying to read an object in two "ngFor" loops, with the first loop acting as a counter for an array whose element acts as a key for the object in the second loop.

thx

EDIT:

tage=['Montag','Dienstag','Mittwoch']
  
  objectArray: {
    id:Number;
    name:String;
    Montag:String;
    Dienstag:String;
    Mittwoch:String;
  }[]=[
    {id:0,name:'Klaus',Montag:'arbeiten',Dienstag:'rumgammeln',Mittwoch:'Frei'},
    {id:1,name:'Dieter',Montag:'frei',Dienstag:'arbeiten',Mittwoch:'rumgammeln'},
    {id:2,name:'Peter',Montag:'rumgammeln',Dienstag:'frei',Mittwoch:'arbeiten'},
  ]

Template

1:{{objectArray[0].Montag}}<br>

2:{{objectArray[0]['Montag']}}<br>

<br>

<ng-container *ngFor="let tag of tage; let i=index">
  {{i}}:{{objectArray[0][tage[i]]}}<br> <------- NOT WORKING
</ng-container>

Error Message

(property) AppComponent.tage: string[]
Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ id: Number; name: String; Montag: String; Dienstag: String; Mittwoch: String; }'.
  No index signature with a parameter of type 'string' was found on type '{ id: Number; name: String; Montag: String; Dienstag: String; Mittwoch: String; }'.ngtsc(7053)
app.component.ts(8, 53): Error occurs in the template of component AppComponent.
Fettmops
  • 1
  • 1
  • 2
  • Solution: https://stackoverflow.com/questions/56833469/typescript-error-ts7053-element-implicitly-has-an-any-type – Fettmops Feb 02 '22 at 09:06

1 Answers1

1

I think you are looking for the keyvalue pipe which will let you access object's key/value in template. https://angular.io/api/common/KeyValuePipe

  testObject: { [key: number]: string } =
  {
    1: 'Object Value 1',
    2: 'Object Value 2',
    3: 'Object Value 3'
  };

  testMap = new Map([
    [2, 'Map Value 2'],
    [null, 'Map Value 3'],
    [1, 'Map Value 1'],
  ]);

  arrTest = ["Array Item 1",
    "Array Item 2",
    "Array Item 3"]

<p>Object & KeyValue Pipe</p>
<div *ngFor="let item of testObject | keyvalue">
    Key: <b>{{item.key}}</b> and Value: <b>{{item.value}}</b>
</div>


<p>Maps & KeyValue Pipe</p>
<div *ngFor="let item of testMap | keyvalue">
    Key: <b>{{item.key}}</b> and Value: <b>{{item.value}}</b>
</div>

<p>Arrays & KeyValue Pipe</p>
<div *ngFor="let item of arrTest | keyvalue:descOrder">
    Key: <b>{{item.key}}</b> and Value: <b>{{item.value}}</b>
</div>

Example: https://stackblitz.com/edit/angular-key-value-pipe-demo-kphrro?file=src%2Fapp%2Fapp.component.html

Joosep Parts
  • 5,372
  • 2
  • 8
  • 33
  • i am trying to use one value of arrTest as key for testObject to get the related testObjects value. – Fettmops Feb 02 '22 at 08:50