时间戳

首页 > 解决方案 > Bootstrap 手风琴不适用于 Angular 7

javascript - Bootstrap 手风琴不适用于 Angular 7

问题描述

我正在根据从服务器获取的数据数组构建一个手风琴，但点击不起作用。

手风琴适用于硬编码数据，但不适用于使用 HttpClient 获取的数据。我什至尝试使用按钮而不是锚标签，但无济于事。

<div class="accordion" id="chalsAccordion">
  <div class="card rounded-0" *ngFor="let chal of chals">
    <a data-toggle="collapse" href="#{{ chal._id }}"
      ><div class="card-header text-dark">
        <p class="mb-0">
          {{ chal.title }}<small> - {{ chal.author }}</small>
        </p>
        <p class="mb-0 ml-auto">{{ chal.points }}</p>
      </div></a
    >
    <div id="{{ chal._id }}" class="collapse">
      <div class="card-body" [innerHTML]="chal.desc"></div>
      <div class="card-footer" *ngIf="!userService.admin">
        <form [formGroup]="flagForm" style="width: 100%">
          <div class="input-group">
            <input type="text" class="form-control rounded-0" placeholder="Flag" formControlName="flag" />
            <div class="input-group-append">
              <button class="btn btn-primary rounded-0" [disabled]="!flagForm.valid" (click)="submitFlag(chal._id)">Submit</button>
            </div>
          </div>
        </form>
      </div>
      <div class="card-footer" *ngIf="userService.admin">
        <div class="ml-auto">
          <button class="btn btn-danger rounded-0"><fa-icon [icon]="['fas', 'trash']"></fa-icon></button>
        </div>
      </div>
    </div>
  </div>
</div>
<button class="btn btn-primary add-chal-btn" routerLink="/chals/add" *ngIf="userService.admin"><fa-icon [icon]="['fas', 'plus']"></fa-icon></button>

import { Component, OnInit } from "@angular/core";
import { FormGroup, FormControl, Validators } from "@angular/forms";
import { ToastrService } from "ngx-toastr";
import { UserService } from "../services/user.service";
import { ChalService } from "../services/chal.service";
import { Response } from "../interfaces/response";
import { $ } from "protractor";

@Component({
  selector: "app-chals",
  templateUrl: "./chals.component.html",
  styleUrls: ["./chals.component.scss"]
})
export class ChalsComponent implements OnInit {
  chals = [];

  flagForm = new FormGroup({
    flag: new FormControl("", [Validators.required])
  });

  constructor(private toast: ToastrService, public userService: UserService, private chalService: ChalService) {}

  ngOnInit() {
    this.chalService.getAll().subscribe(
      (data: Response) => {
        this.chals = data.data["chals"];
      },
      err => {
        this.toast.error(err.error.msg, "Oops!!!");
      }
    );
  }

  submitFlag(id: string) {}
}

编辑- 响应很好，UI 也正确呈现，只是问题是点击没有展开手风琴。

标签： javascripthtmlangulartypescript

解决方案

数组是基于索引的，因此要访问数组中的元素，您必须提供索引。要从响应中获取结果，只需尝试将响应设置为您的数组。

`ngOnInit() {
    this.chalService.getAll().subscribe(
        (data: Response) => {
           this.chals = data.data; // -- updated the code here
        },
        err => {
        this.toast.error(err.error.msg, "Oops!!!");
        });
}`

另外请调试 chalService 以查看您是否收到了对 api 的 http 调用的响应。

推荐阅读