如何在Ionic的HTMLCollection中选择索引？

Question

我要选择我在页面中生成的所有.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>

当我选择.message-wrapper时，它会返回一个HTMLCollection，但无法访问其子级

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