Bootstrap手風琴不使用角度7

Question

我正在根據從服務器獲取的數據數組構建一個手風琴，但點擊不起作用。

手風琴在硬編碼數據上工作正常，但在使用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也正確呈現，問題是點擊不會擴展手風琴。

Answer 1

數組是基於索引的，因此要訪問數組中的元素，您必須提供索引。 要從響應中獲取結果，只需嘗試設置對數組的響應。

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

另外，請調試chalService以查看您是否收到了對http的http調用的響應。

Answer 2

我發現了問題，那就是_id字段以一個int開頭，這是問題的根源。

我通過在每個_id字段中添加_來解決它。