Bootstrap手风琴不使用角度7

Question

I am building an accordion based on array of data fetched from the server but the clicks are not working.

The accordion is working fine on hard-coded data but not on the data fetched using HttpClient. I even tried using button instead of anchor tags but to no avail.

<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) {}
}

Edit - The response is coming fine and the UI is also rendered correctly, just the problem is that the click does not expand the accordion.

Answer 1

Arrays are Index based so to access an element in an Array you have to provide an Index. To get the results from the response simply try to set the response to your array.

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

Also please debug chalService to see if you are getting the response of your http call to the api.

Answer 2

I found the problem, it was that the _id field was starting with an int which was the root of the problem.

I solved it by adding an _ to every _id field.