Refaktor prostego, powtarzalnego kodu w angularze

0

Hej, jestem początkujący w Angularze. Mam pytanie, czy można jakoś poprawić ten kod aby wykonywał się np. w pętli dla tych trzech [_(cryptocurrency-code), _(cryptocurrency-name), _(cryptocurrency-emitter)]

<div role="columnheader" class="cr-header">
	_(cryptocurrency-code)
	<button (click)="saveToLists('cryptocurrency-code', true)"></button>
	<button (click)="saveToLists('cryptocurrency-code', false)"></button>
</div>
<div role="columnheader" class="cr-header">
	_(cryptocurrency-name)
	<button (click)="saveToLists('cryptocurrency-name', true)"></button>
	<button (click)="saveToLists('cryptocurrency-name', false)"></button>
</div>
<div role="columnheader" class="cr-header">
	_(cryptocurrency-emitter)
	<button (click)="saveToLists('cryptocurrency-emitter', true)"></button>
	<button (click)="saveToLists('cryptocurrency-emitter', false)"></button>
</div>

cryptocurrency-code, cryptocurrency-name, cryptocurrency-emitter to kolejno: kod, nazwa i podmiot emitujący kryptowalutę, pobrane w języku polskim lub ukraińskim (w zależności od ustawień usera).
Dla każdego tworzymy diva oraz po jednym przycisku do dodania listy wysokiego priorytetu subskrybcji bądź niskiego (czyli razem dwa).

Zamiast _(cryptocurrency-code) w wynikowym html'u będzie nazwa, np. w polskim: BTC (dla bitcoin'a).
Jednak do funkcji chciałbym podawać nie nazwę, a po prostu string 'cryptocurrency-code' i wartość true bądź false

Gdyby to były propertisy zapisane w klasie .ts to chyba bym dał radę, ale tutaj nie mam za chiny pojęcia. Trochę taki powtarzalny kod napisałem i chciałbym go poprawić.

0

Nie piszę w Angularze, ale krótkie googlowanie mówi mi, że tam jest coś takiego jak *ngFor do robienia pętli https://angular.io/api/common/NgForOf

1

Też nie używam Angulara, ale w React-cie wrzuciłbym te 3 wartości do obiektu:

const values = {"cryptocurrency-name": a, "cryptocurrency-code": b, "cryptocurrency-emitter": c}

i następnie mapował:

{Object.keys(values).map((key, i)=>{
  return (
     <div role="columnheader" class="cr-header" key={i}>
    	_{values[key]}
    	<button (click)="saveToLists(key, true)"></button>
        <button (click)="saveToLists(key, false)"></button>
    </div>
  );
}}

Mogą być błędy w kodzie, bo pisałem go teraz na szybko w polu tekstowym, ale wydaje się być dobrze

1 użytkowników online, w tym zalogowanych: 0, gości: 1