Key value from variable and string in Angular Template

Question

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.

Solution: stackoverflow.com/questions/56833469/…

Fettmops
– Fettmops

2022-02-02 09:06:27 +00:00
Commented Feb 2, 2022 at 9:06 — Fettmops
– Fettmops, Commented Feb 2, 2022 at 9:06

Joosep Parts · Accepted Answer · 2022-02-02 08:09:25Z

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

answered Feb 2, 2022 at 8:09

Joosep Parts

6,3452 gold badges13 silver badges38 bronze badges

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

1 Comment

Fettmops Over a year ago

i am trying to use one value of arrTest as key for testObject to get the related testObjects value.

Collectives™ on Stack Overflow

Key value from variable and string in Angular Template

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related