используя функцию щелчка с NGB-аккордеоном - PullRequest
Новая
       19

используя функцию щелчка с NGB-аккордеоном

0 голосов
/ 27 мая 2019

изображение аккордеона Я новичок в угловой.Я хочу использовать функцию щелчка внутри аккордеона, чтобы при нажатии на заголовок панели имя студента, сопоставленное с ним, передавалось моей функции в компоненте.Кто-нибудь может мне помочь.

Я пытался нажать кнопку с помощью ngb-панели, а также ng-шаблона, но оба не удалось.Также я попытался обернуть шаблон внутри диапазона и связать с ним функцию щелчка, но это также не сработало.Я могу получить идентификатор панели в моем компоненте, но мне также нужен объект данных. 

Info Array

    [{
    "firstName": "Sagar",
    "middleName": "Alias",
    "lastName": "jacky",
    "statusCode": {
            "ResultCode": "ERR",
            "Messages": [{
                    "code": "E0501",
                    "text": "tripNameAM is not present in our records",
                    "data": "tripNameAM"
                },
                {
                    "code": "E05012",
                    "text": "tripNamePM is not present in our records"
                    "data": "tripNamePM"
                }
                           ]
        }
    }
]



<div id="collapseExample" [ngbCollapse]="isCollapsed" class="accordion">
        <div class="card">
            <div class="card-body">
                <ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0" (panelChange)="test($event)">
                    <ngb-panel *ngFor="let data of info" title="{{data.firstName+' '+data.middleName+' '+data.lastName}}">
                        <ng-template ngbPanelContent *ngFor="let message of data.statusCode.Messages">
                                {{message.text}}
                        </ng-template>
                    </ngb-panel>
                </ngb-accordion>
            </div>
        </div>
    </div>

ниже я попробовал 

<div id="collapseExample" [ngbCollapse]="isCollapsed" class="accordion">
        <div class="card">
            <div class="card-body">
                <ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0" (panelChange)="test($event)">
                    <ngb-panel *ngFor="let data of info" title="{{data.firstName+' '+data.middleName+' '+data.lastName}}" (click)="getStudentname(data)">
                        <ng-template ngbPanelContent *ngFor="let message of data.statusCode.Messages">
                                {{message.text}}
                        </ng-template>
                    </ngb-panel>
                </ngb-accordion>
            </div>
        </div>
    </div>

компонент 

//imports..

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css', './mdb.scss']
})

export class AppComponent implements OnDestroy, OnInit {

constructor(private http: Http){}
...
...
getStudentname(data){

console.log(data);

}

}

Я хочу, чтобы имя студента отображалось на панели при нажатии на заголовок.Кто-нибудь может указать мне правильное направление.

1 Ответ

0 голосов
/ 27 мая 2019

Согласно документации , вы также можете настроить заголовок. Оберните заголовок внутри элемента и поместите элемент click на него. Кроме того, вы создаете несколько элементов ng-template, что, вероятно, не то, что вы хотите сделать, также помещаете это в элемент контейнера: 

<ngb-panel *ngFor="let data of info" title="{{data.firstName+' '+data.middleName+' '+data.lastName}}" (click)="getStudentname(data)">
  <ng-template ngbPanelContent >
    <span *ngFor="let message of data.statusCode.Messages">
       {{message.text}}
    </span>
  </ng-template>
  <ng-template ngbPanelHeader>
    <div (click)="getStudentName(data)">
      {{data.firstName+' '+data.middleName+' '+data.lastName}}
    </div>
  </ng-template>
</ngb-panel>
...