angular - Obținerea valorii HTML interne din lista derulantă

Folosesc un dropdown Bootstrap astfel:

<ul class="dropdown-menu">
  <li>
    <a class="dropdown-item" href="#" (click)="getMyValue('myvalue')">My Value</a>
  </li>
  <li>
    <a class="dropdown-item" href="#" (click)="getMyValue('someothervalue')">Some Other Label</a>
  </li>
 </ul>

și funcția arată așa:

getMyValue(todo: string) {
  console.log("selected value is:", todo);
  console.log("selected text is:", ???);
}

În loc să analizez textul ca al doilea parametru, cum ar fi "Valoarea Mea 01", "02" etc., există vreo modalitate să omit acest lucru și să-l folosesc inteligent astfel încât să nu fie nevoie să scriu aceleași lucruri de mai multe ori?

Răspuns #1

Poți transmite evenimentul metodei tale.

<li>
  <a class="dropdown-item" href="#" (click)="getMyValue('myval1', $event)"
    >My Value 01</a>
</li>
<li>
  <a class="dropdown-item" href="#" (click)="getMyValue('myval2', $event)"
    >My Value 02</a>
</li>

Și preia eticheta cu event.target.value.

getMyValue(todo: string, event: any) {
  console.log('selected value is:', todo);
  console.log("selected text is:", event.target.text);
}

Alternativ, puteți lua în considerare lucrul cu un array pentru a genera elementele HTML.

Astfel, poți transmite fiecare element item metodei în timpul evenimentului de clic.

items = [
  { value: 'myval1', label: 'My Value 01' },
  { value: 'myval2', label: 'My Value 02' },
];

getMyValue(item: any) {
  console.log('selected value is:', item.value);
  console.log('selected text is:', item.label);
}

<li *ngFor="let item of items">
  <a class="dropdown-item" href="#" (click)="getMyValue(item)"
  >{{item.label}}</a>
</li>

Demo @ StackBlitz

Răspunsul #2

Poți folosi @for pentru a rula bucla și @if with as sintaxă, pentru a crea eticheta de afișare și a o reutiliza atât pentru funcție, cât și pentru etichetă!

Sintaxa Fluxului de Control Angular

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <ul class="dropdown-menu">
      @for(i of arr;track $index) {
      <li>
        @if(i?.toString()?.padStart(2);as displayName) {
        <a class="dropdown-item" href="#" (click)="getMyValue('myval' + i, displayName)">My Value {{displayName}}</a>
        }
      </li>
      }
    </ul>
  `,
})
export class App {
  name = 'Angular';
  arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

  getMyValue(todo: string, displayName: string) {
    console.log('selected value is:', todo);
    console.log('selected text is:', displayName);
  }
}

bootstrapApplication(App);

Demonstrație Stackblitz