У ссылки кликает уникальная кнопка переключения?

Question

Я использую AngularJS и просто CSS / HTML для создания этой веб-страницы.У меня есть список ссылок на книги, которые я перебираю и создаю новую «карточку» (просто создаю div) для каждой ссылки.В рамках этого цикла я также создаю переключатель, чтобы рядом с каждой картой был переключатель.Я хочу, чтобы тумблер был включен / true, когда нажата ссылка на книгу, но сейчас он, кажется, работает только для первой ссылки, как я хочу.Если я нажму на любую другую ссылку в списке, переключатель не будет работать.

По сути, я настроил его так, чтобы при щелчке по ссылке запускалась функция toggleSwitch (), которая запускала и переключала кнопку.Я думаю, проблема в том, что мой угловой вариант написан так, что он каждый раз ищет первую ссылку, но я не уверен, как пройтись по списку.(Я новичок в веб-разработке, поэтому прости меня, если это кажется глупым)

 <span *ngIf="selectedTitles">
                <div *ngFor="let audibleTitle of selectedTitles" class="justify-content-center">
                    <a  class="bookLink" href="link to a book"  (click)="toggleSwitch()" target="_blank">
                        <div class="audible-title card-body">
                            <strong>title name</strong> <br>
                            title author  <strong> | </strong>
                            <!--<span *ngFor="let genre of audibleTitle.genre"> {{genre}} > </span>-->
                                <span>title genre</span>
                        </div>
                    </a>
                    <label class="switch">
                        <input #link type="checkbox" id="sliderButton" >
                        <span class="slider round" ></span>
                    </label>
                </div>
            </span>

export class ContentRecommendationComponent implements OnInit {
  @ViewChild('link') testLink;

  @Input() prometheusResponse: PrometheusResponse;

  selectedTitles: AudibleTitle[] = [];

  constructor() {
  }

  ngOnInit() {
  }
  toggleSwitch(){
    this.testLink.nativeElement.checked = true;
    console.log('this is showing');
  }

}

Я хочу, чтобы каждый тумблер ассоциировался с его правильной ссылкой.Я думаю, мой вопрос, как я могу ссылаться через каждую ссылку в угловых?

Answer 1

Один из способов - отправить шаблонную переменную link через ваш метод toggleSwitch следующим образом:

<span *ngIf="selectedTitles">
  <div *ngFor="let audibleTitle of selectedTitles" class="justify-content-center">
    <a  class="bookLink" href="link to a book"  (click)="toggleSwitch(link)" target="_blank">
      <div class="audible-title card-body">
        <strong>title name</strong> <br> title author  <strong> | </strong>
        <!--<span *ngFor="let genre of audibleTitle.genre"> {{genre}} </span>-->
        <span>title genre</span>
      </div>
    </a>
    <label class="switch">
      <input #link type="checkbox" id="sliderButton" >
         <span class="slider round" ></span>
    </label>
  </div>
        </span>

Теперь ваш toggleSwitch будет выглядеть так:

toggleSwitch(link){
    link.nativeElement.checked = true;
    console.log('this is showing');
  }

Таким образом, на каждой итерации toggleSwitch будет получать фактическую ссылку на этой итерации, и будет переключаться только этот конкретный переключатель

Answer 2

Я хочу, чтобы каждый переключатель был связан с его правильной ссылкой. Я предполагаю, что мой вопрос, как я могу ссылаться через каждую ссылку в угловых?

Вам нужно передать индекс итератора цикла в функцию переключения. * ngFor = "let item of items; let i = index", затем передайте i переключателю (i).

Answer 3

Я не советую обращаться к HTML nativeElement для чего-то подобного. У вас уже есть базовая структура данных, поэтому вы можете добавить к ней свойство checked. У вас возникают проблемы только с возможностью проверить первую ссылку, потому что вы не указываете методу toggleSwitch (), какой audibleTitle вы хотите проверить или снять галочку. Подумайте о базовой модели данных, а не о самом HTML.

Я также подвергаю сомнению использование вами действия (click) для ссылки, которая также имеет href. Если щелкнуть ссылку дважды (открыв тем самым второе окно), вы сбросите свойство checked. Просто пища для размышлений.

В вашем TypeScript:

export interface AudibleTitle {
    checked: boolean;
    link: string;
}

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent {
    audibleTitles: Array<AudibleTitle> = [
        {
            checked: false,
            link: `https://example.com`
        },
        {
            checked: false,
            link: `https://google.com`
        },
    ];


    toggleSwitch(audibleTitle: AudibleTitle) {
        audibleTitle.checked = !audibleTitle.checked;
        console.log('this is showing');
    }
}

    audibleTitles: Array<AudibleTitle> = [
        {
            checked: false,
            link: `https://example.com`
        },
        {
            checked: false,
            link: `https://google.com`
        },
    ];


    toggleSwitch(audibleTitle: AudibleTitle) {
        audibleTitle.checked = !audibleTitle.checked;
        console.log('this is showing');
    }
}

В вашем HTML:

<span *ngIf="selectedTitles">
    <div *ngFor="let audibleTitle of selectedTitles" class="justify-content-center">
        <a class="bookLink" href="https://example.com/{{audibleTitle.link}}" (click)="toggleSwitch(audibleTitle)" target="_blank">
            <div class="audible-title card-body">
                <strong>title name</strong> <br>
                title author <strong> | </strong>
                <!--<span *ngFor="let genre of audibleTitle.genre"> {{genre}} > </span>-->
                <span>title genre</span>
            </div>
        </a>
        <label class="switch">
            <input #link type="checkbox" id="sliderButton">
            <span class="slider round"></span>
        </label>
    </div>
</span>