Angular ngFor Bootstrap carousel-item-active 一次

Question

component.html

<section *ngFor="let project of projectList" class="child p-5">
    <div class="first">
        <h1>{{ project.title }}</h1>
        <p><strong>{{ project.description }}</strong></p>
    </div>


    <div id="car_{{ project.title}}" class="carousel slide second" data-ride="carousel">
        <div class="carousel-inner">
            <div *ngFor="let file of mediaList">
                <div *ngIf="file.postId == project._id ">
                    <div class="carousel-item active">
                        <img src="{{ url+file.path }}" class="d-block mx-auto"
                            style="height: -webkit-fill-available;">
                    </div>
                </div>
            </div>
        </div>
        <a class="carousel-control-prev" href="#car_{{ project.title}}" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#car_{{ project.title}}" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</section>

component.ts

ngOnInit() {
this.url = environment.backendBaseUrl;
this.posts.getPost().subscribe(
  res => {
    this.projectList = res['posts'];
    console.log(res['posts']);
  },
  err => {
    console.log(err);

  });

this.media.getMedia().subscribe(
  res => {
    this.mediaList = res['mediaFiles'];
    console.log(res['mediaFiles']);
  },
  err => {
    console.log(err);

  });
}

我正在尝试将活动 class 仅应用到轮播项目一次。我不能使用索引，因为它既不匹配结尾也不匹配第一个：

0: {_id: "5dd78c7ff21808b10c9273dd", title: "SingleImage", description: "single image↵Nam quis tortor nec ligula auctor rut…at tellus vitae maximus. Donec in efficitur odio."}
1: {_id: "5dd78cf3f21808b10c9273df", title: "MultipleImages", description: "Multiple↵Nam quis tortor nec ligula auctor rutrum.…at tellus vitae maximus. Donec in efficitur odio."}
2: {_id: "5dd78ee4cbf2ecadd8e2ac53", title: "Mixed", description: "Mixed↵Nam quis tortor nec ligula auctor rutrum. Cu…at tellus vitae maximus. Donec in efficitur odio."}

0: {_id: "5dd78c7ff21808b10c9273de", path: "uploads\admin74407295057.png", type: "image/png", postId: "5dd78c7ff21808b10c9273dd", __v: 0}
1: {_id: "5dd78cf3f21808b10c9273e0", path: "uploads\admin74407411823.png", type: "image/png", postId: "5dd78cf3f21808b10c9273df", __v: 0}
2: {_id: "5dd78cf3f21808b10c9273e1", path: "uploads\admin74407411821.png", type: "image/png", postId: "5dd78cf3f21808b10c9273df", __v: 0}
3: {_id: "5dd78ee4cbf2ecadd8e2ac54", path: "uploads\admin74407908979.png", type: "image/png", postId: "5dd78ee4cbf2ecadd8e2ac53", __v: 0}
4: {_id: "5dd78ee5cbf2ecadd8e2ac55", path: "uploads\admin74407908975.png", type: "image/png", postId: "5dd78ee4cbf2ecadd8e2ac53", __v: 0}
5: {_id: "5dd78ee5cbf2ecadd8e2ac56", path: "uploads\admin74407908967.mp4.gif", type: "video/mp4", postId: "5dd78ee4cbf2ecadd8e2ac53", __v: 0}
length: 6

这使得它们显示在彼此之上而不是滑动... 我不相信有一种方法可以在 ngfor 中分配一个布尔值，因此不会再次向 class

添加 active

Answer 1

JSON 来自 2 个单独的表，它们的关系是 postID..

在迭代二维数组中的索引的函数中使用 for 循环解决了它，使每个 [][this] 都可以在它们自己的迭代器中访问，从而可以访问 HTML 中的第一个索引：

this.media.getMedia().subscribe(
        res => {
            this.mediaList = res['mediaFiles'];
            this.checkId(this.projectList, this.mediaList);
            //console.log(res['mediaFiles']);
        },
        err => {
            console.log(err);

        }
    );
}

public checkId(proj: any, medi: any) {
    var fileList: any[][] = [];     
    var idx: number = 0;

    for (let x = 0; x < proj.length; x++) {
        for (let y = 0; y < medi.length; y++) {
            //console.log(x,y)
            //console.log(medi[y])
            if(y == 0){
                fileList[x] = []
                idx = 0
            }
            if(medi[y].postId == proj[x]._id) {
                fileList[x][idx] = medi[y]
                idx++
                //console.log("idx: "+idx)
            }
        }
    }
    this.filesList = fileList;
    console.log("fileList: ",this.filesList);
}

输出： fileList: (4) [Array(1), Array(2), Array(3), Array(2)]

而 html 现在是：

<section *ngFor="let project of projectList; index as idx" class="child p-5">
    <div class="first">
        <h1>{{ project.title }}</h1>
        <p><strong>{{ project.description }}</strong></p>
    </div>


    <div id="car_{{ idx }}" class="carousel slide second pb-5" data-ride="true" data-wrap="false">
        <ol class="carousel-indicators mb-5 pb-5">
            <li *ngFor="let file of filesList[idx]; index as mdx" [ngClass]="{'active': mdx == 0}"
            [attr.data-target]="'#car_'+ idx" [attr.data-slide-to]="mdx"></li>
        </ol>
        <div class="carousel-inner">
            <div *ngFor="let file of filesList[idx]; index as mdx"
                [ngClass]="{'carousel-item': file.postId == project._id, 'active': mdx == 0}" data-interval="0">
                <img src="{{ url+file.path }}" *ngIf="file.type.includes('image');else videoblock"
                    class="d-block mx-auto" style="max-height: 75vh;max-width: 90vw;min-height: 50vh;">
                <ng-template #videoblock>
                    <video class="d-block mx-auto embed-responsive-item" controls
                        style="max-height: 75vh;max-width: 90vw;min-height: 50vh;">
                        <source src="{{ url+file.path }}" type="{{file.type}}">
                        Your browser does not support the video tag.
                    </video>
                </ng-template>
            </div>
        </div>
        <a class="carousel-control-prev" href="#car_{{ idx }}" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#car_{{ idx }}" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</section>

Angular ngFor Bootstrap carousel-item-active 一次

Angular ngFor Bootstrap carousel-item-active once

angular

typescript

multidimensional-array

carousel

ngfor