Select/click 选择选项卡后 ngFor 列表中的第一项 Angular 8

Question

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

这是 HTML 与 *ngFor 制作“已发送”项目的中间列表：

   <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、returns JSON并将列表放入“sentMessObj”，该列表显示在屏幕左侧[=38] =]s.

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

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

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

如有任何意见、指导或建议，我们将不胜感激！谢谢！

Answer 1

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

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

在组件中

sentMessObj:Data[]=[];

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

showingMessage:Data;

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

然后，如果您在填写 sentMessObj 后单击选项卡，那么只有第一个元素，例如

this.showingMessage=this.sentMessObj[0];

Simple Demo

Select/click 选择选项卡后 ngFor 列表中的第一项 Angular 8

Select/click first item in an ngFor list after selecting a tab Angular 8

angular

tabs

click

ngfor