Question

accordion image 我是新手。我想在手风琴中使用click函数，以便在单击面板标题时，映射到它的学生姓名会传递到组件中的我的函数中。有人可以帮我吗？

我尝试通过ngb-panel和ng-template进行点击，但是都失败了。我也尝试将模板包装在一个范围内并将click函数链接到它，但是它也没有解决。我可以在组件中获取面板ID，但是我也需要数据对象。

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);

}

}

我想在单击标题时将学生姓名映射到面板。谁能指出我正确的方向。

Answer 1

根据documentation，您还可以自定义标题。将标头包装在元素内，然后将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>

在ngb-accordion中使用点击功能

1 个答案: