Question

我正在使用AngularJS和CSS / HTML来创建此网页。我有一个书本链接列表，可以循环浏览并为每个链接创建一个新的“卡片”（只需创建一个div）。作为此循环的一部分，我还创建了一个切换开关，以便每个卡旁边都有一个切换开关。我希望单击书本链接时切换开关为开/真，但是现在它似乎只对我想要的第一个链接有效。如果我单击列表中的任何其他链接，则该切换开关似乎无效。

我基本上已经设置好它，以便在单击链接时会触发toggleSwitch（）函数，该函数可以切换按钮。我认为问题在于，我编写角度文件的方式是每次查找第一个链接，但是我不确定如何遍历列表。（我是Web开发的新手，如果这看起来很愚蠢，请原谅我）

-Dcom.sun.management.jmxremote.port=1099

 <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>

我希望每个切换都与其正确的链接相关联。我想我的问题是如何通过角形的每个链接进行链接？

Answer 1

我不建议您访问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>

Answer 2

一种方法是通过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 3

我希望每个切换都与其正确的链接相关联。我想我的问题是如何通过角形的每个链接进行链接？

您需要将循环的迭代器索引传递给toggle函数。 * ngFor =“让项的内容；让i = index”，然后将i传递给toggleswitch（i）。

有链接点击触发唯一切换按钮吗？

3 个答案: