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

Question

我正在开发一个 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((，但是除了第一个名为"inbox"的选项卡之外，我根本无法让此方法响应，这也是显示的第一个选项卡。

基本上，我正在寻找的是当选择一个选项卡时，应用程序会在左侧找到第一个div 元素并自动单击它，这会使其处于活动状态并调用相应的(单击(函数。我是否必须调用单击事件才能完成此操作？

任何建议，方向或建议将不胜感激！谢谢！

Answer 1

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

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

在组件中

sentMessObj:Data[]=[];

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

showingMessage:Data;

您将在 HTML 中显示此变量属性，然后单击以填写此变量。

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

this.showingMessage=this.sentMessObj[0];

简单演示