我在使用firebase和angular7的Web应用程序中遇到有关列表绑定的问题。问题如下:
1->我想要获取用户列表,我正在获取他们,并将他们推送到列表中,列表的结构在那里显示了我的班级名称
我尝试了一个静态注入示例,在该示例中,我没有将类名作为列表中的对象获取,而是被绑定了,现在我不知道可以尝试什么。
这是我的Component.ts
export class UserInboxComponent implements OnInit {
// InboxList: Array<GetInboxListModel>;
public InboxList: Array<GetInboxList22>;
constructor(private userInbox: UserInboxService, private authService: AuthService, private db: AngularFireDatabase) {
this.InboxList = new Array<GetInboxList22>();
}
ngOnInit() {
const path = `Users/${userId}/Conversation`;
this.getUserPath(path);
}
async getUserPath(path: string) {
this.db.database.ref(path).on('child_added', async (snapshot) => {
const snap = snapshot.val();
this.getInboxList2(snap.ChatId, snap.UserId);
});
}
getInboxList2(chatId: string, userId: string) {
const path = `${DatabasePath.Conversations}/${chatId}`;
const inboxObject = new GetInboxList22();
this.db.object(path).query.once('value')
.then(async conversation => {
const userPath = `${DatabasePath.Users}/${userId}`;
const userDetail = await firebase.database().ref(userPath).once('value')
.then(snapshot => {
return snapshot.val();
});
inboxObject.ChatId = chatId;
inboxObject.DisplayName = userDetail.DisplayName;
inboxObject.GroupConversationId = conversation.child('GroupConversationID').val();
inboxObject.GroupName = conversation.child('GroupName').val();
inboxObject.IsRead = conversation.child('LastMessage').child('isRead').val();
inboxObject.Message = conversation.child('LastMessage').child('Message').val();
inboxObject.MessageDisplayTime = conversation.child('LastMessage').child('MessageTime').val();
inboxObject.MessageTime = conversation.child('LastMessage').child('MessageTime').val();
inboxObject.ProfileImage = userDetail.ProfileImage;
inboxObject.ReceiverId = conversation.child('ReceiverId').val();
inboxObject.SenderId = conversation.child('SenderId').val();
return this.InboxList.push(inboxObject);
});
}
async getUserDetail(userId: string) {
const path = `${DatabasePath.Users}/${userId}`;
return await this.db.object(path).query.once('value').then(snap => {
return snap.val();
});
}
}
这是我的html
<ul *ngIf="InboxList.length > 0">
<li class="contact" *ngFor="let item of InboxList">
<div class="wrap">
<!--[ngClass]="{'unread-message' : (item.IsRead == false && item.SenderId != User.UserId)}"-->
<img [src]="item.ProfileImage" *ngIf="item.ProfileImage != '' && item.ProfileImage != null" [alt]="item.DisplayName" />
<!-- <img [src]="data:image/JPEG;base64,noImageBase64" ng-image-appear placeholder *ngIf="item.ProfileImage == '' || item.ProfileImage == null" alt="{{item.DisplayName}}" /> -->
<div class="meta">
<p class="message-time">{{item.MessageDisplayTime}}</p>
<p class="name">{{item.DisplayName}}</p>
<p class="converation-group-name">{{item.GroupName == null || item.GroupName == '' ? '' : ( item.GroupName )}}</p>
<p class="preview">{{item.Message}}</p>
<!-- [ngClass]="{'un-read-message': (item.IsRead == false && item.SenderId != User.UserId)}"-->
</div>
</div>
</li>
</ul>
<ul *ngIf="InboxList.length == 0">
<li class="contact text-center">
<div class="wrap">
<div class="meta">
<p class="name">No Conversations Found</p>
</div>
</div>
</li>
</ul>
预期结果,因为它将被绑定
InboxList = [{
ChatId: "id"
DisplayName: "name"
GroupConversationId: "id"
GroupName: "id"
IsRead: false
Message: "msg"
MessageDisplayTime: "time"
MessageTime: "time"
ProfileImage: "img"
ReceiverId: "id"
SenderId: "id"}]
不知道从哪里获取我的CLass名称'GetInboxList22'
这是结果
InboxList = [GetInboxList22{
ChatId: "id"
DisplayName: "name"
GroupConversationId: "id"
GroupName: "id"
IsRead: false
Message: "msg"
MessageDisplayTime: "time"
MessageTime: "time"
ProfileImage: "img"
ReceiverId: "id"
SenderId: "id"}]