具有NgStyle和属性Binding（或其他）的角度变换数据

Question

im learning programming in Angular and i have a problem with property Bindings. But first the part of my code:

// TS FILE

data[
{"id": "1", "name": "tester", "rev": "1"},
{"id": "2", "name": "tester", "rev": "1"},
{"id": "3", "name": "tester", "rev": "1"},
];


createNumberArray(): number[] {
// code to fill array
return anyArrayOfNumbers
}

<div  *ngFor="let datas of data; let i = index" >


    <ul>
  <li class='list-item' [id]= datas.id [ngStyle]="{ 'transform': 'rotate( numberArray[i] deg) translate(0,-100px) rotate(-numberArray[i]deg)' }">
     <!-- how it would work: <li class='list-item' [id]= datas.id [ngStyle]="{ 'transform': 'rotate(200deg) translate(0,-100px) rotate(-150deg)' }"> -->
            <div class='label1'><img alt='notfound' class='img2' src='any icon'></div>
            <div class='label2'>
                {{ datas.name }}
            </div>
            <div class='label3'>
                {{ datas.id }}
            </div>
            <div class='label4'>
                {{ datas.rev }}
            </div>
        </li>
    </ul>
</div>

The data property contains an Array of Objects and i want to list every Object with his name, id and rev. I can display them, but now i also want them to rotate dynamically. So i created a new Array of numbers, which is coming from an function called createNumberArray(). And these numbers shall tell the ngStyle for each loop run which number he shall take to rotate. This is how i wanted to be it:

<li class='list-item' [id]= datas.id [ngStyle]="{ 'transform': 'rotate( numberArray[i] deg) translate(0,-100px) rotate(-numberArray[i]deg)' }">

But thats not working cause i can´t get it managed to work, i tryed it with with property binding, but never got the number out of the array inside the transform. And thats the code how it would work (with just the same number all the time):

<!-- how it would work: <li class='list-item' [id]= datas.id [ngStyle]="{ 'transform': 'rotate(200deg) translate(0,-100px) rotate(-150deg)' }"> -->

I managed to get this work with Js, Jquery and html but now i want to do it with Angular. And also without Jquery, so i dont just copy past my old code. But im a bit confused about if i should use Jquery in Angular in the future. Whats the best way to manupulate the DOM, what do you guys think?

I would really appreciate your help. Im already thankful that you took the time to read my question.

Answer 1

First, set the array values in constructor:

Typescript:

  ...
  anyArrayOfNumbers: number[] = [];
  constructor() {
    for (let i = 0; i < this.data.length; i++) {
      this.anyArrayOfNumbers.push(200);
    }
  }

  getNumberArray(index): number {
    return this.anyArrayOfNumbers[index];
  }

Then call getNumberArray from html the method:

HTML

...[ngStyle]="{ 'transform': 'rotate('+numberArray[i]+'deg) translate(0,-100px) rotate('+numberArray[i]+'deg)' } ...

DEMO