时间戳

首页 > 解决方案 > 选择选项卡 Angular 8 后，选择/单击 ngFor 列表中的第一项

angular - 选择选项卡 Angular 8 后，选择/单击 ngFor 列表中的第一项

问题描述

我正在开发一个 Angular UI，它在屏幕顶部有三个选项卡，它们的电子邮件名称听起来像“收件箱”、“已发送”和“已删除”。每次单击选项卡时，都会从 API 调用返回一个新的对象集合，并在屏幕左侧填充一个列表。

这是带有 *ngFor 的 HTML，用于制作“已发送”项目的中间列表：

   <tab heading="Sent" (selectTab)="Sent($event)">
          <div class="sentScroll">
          <div #sentItems *ngFor="let msg of sentMessObj; let i=index">
            <a class="list-group-item list-group-item-action" [ngClass]="{'active': msg == activeMess}" (click)="activeMessage = msg; popItSent(i)">
              <span id="msgSubject">{{msg.Mess[0].Subject}}</span><br /><span class="dateTimeCls" id="datetime1">{{msg.Mess[0].Updated | date : 'short'}}</span>
            </a>
          </div>
        </div>
        </tab>

还有“发送”功能（减去 JSON 处理的详细信息，因为它有效且可能不相关）：

 Sent($event) {
   this.sentMessagesObj = [];
   this.activeTab = $event.heading;
   this._dataService.getSentMessages().subscribe(data => {

  // Iterate through Conversations
  for(let j = 0; j < data['returnedEntity']['conversationList'].length; j++) {
  ...  
    // Iterate through Messages within each Conversation
    for(let k = 0; k < data['returnedEntity']['conversationList'][j]['messages'].length; k++) {
    ...          }
    this.sentMessObj.push(convo);
  }
});

}

上述函数调用 API，返回 JSON 并将列表放入“sentMessObj”，该列表显示在屏幕左侧的 div 中。

我希望发生的是当有人点击“已发送”选项卡时，应用程序会自动选择列表中的第一项并单击它，这会触发“popItSent()”函数，该函数会在右侧显示详细的文本屏幕的一侧。

到目前为止，我已经尝试使用 #items 选择器，使用 @ViewChildren('items') liItems: QueryList 引用它，调用 ngAfterViewInit() 然后在“.nativeElement.firstChild as HTMLElement”上调用 .click()，但我除了在名为“收件箱”的第一个选项卡上，该方法根本无法响应，这也是显示的第一个选项卡。

基本上，我正在寻找的是当一个选项卡被选中时，应用程序会找到左侧的第一个 div 元素并自动单击它，这使其处于活动状态并调用相应的（单击）函数。我是否一定需要调用点击事件来完成此操作？

任何意见、方向或建议将不胜感激！谢谢！

标签： angulartabsclickngfor

解决方案

您不需要点击触发器。您应该再创建一个与列表中的模型相关的变量。然后在单击列表中的任何项目时显示此模型。当您更改选项卡时，只需将第一个元素分配给此模型。认为你有课

export class Data{
  //inside here your data model coming from api which is inside sentMessObj
}

在组件中

sentMessObj:Data[]=[];

然后，当您从 api 获取数据时，将其分配给Data[]array 。并创建另一个变量，如下所示

showingMessage:Data;

您将在 html 中显示此变量属性，然后单击您填充此变量。

然后，如果您在填写后单击选项卡，sentMessObj则只需像第一个元素

this.showingMessage=this.sentMessObj[0];

简单演示

推荐阅读