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

Question

我正在开发一个 Angular 用户界面，它在屏幕顶部有三个选项卡，它们的电子邮件名称听起来像是“收件箱”、“已发送”和“已删除”。每次单击选项卡时，都会从 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>

以及“Sent”函数（减去 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 作为 HTMLElement 上调用 .click()， " 但除了第一个名为“收件箱”的选项卡外，我根本无法让此方法做出响应，这也是显示的第一个选项卡。

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

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

Answer 1

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

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

Simple Demo