Dom 如何从Ionic中的HTMLCollection中选择索引？

我想选择我在页面中生成的所有

.message wrapper

元素

<div class="message-wrapper" *ngFor="let key of chat.chat_lines_keys" [ngClass]="{
    'neutro': !chat.chat_lines[key].user_id,
    'me': user.id == chat.chat_lines[key].user_id,
    'you': chat.chat_lines[key].user_id && user.id != chat.chat_lines[key].user_id
    }">
    <div class="message">
        <input type="hidden" name="user_id" [value]="chat.chat_lines[key].user_id">
        <input type="hidden" name="line_id" [value]="chat.chat_lines[key].id">
        <p>{{ chat.chat_lines[key].text }}</p>
    </div>
</div>

---

消息的长度是多少？@HyuckKang返回5

let messages = this.element.nativeElement.getElementsByClassName("message-wrapper");
console.log(messages); // Returns HTMLCollection
console.log(messages[0]); // Returns null