列表未正确绑定,获取列表为空

时间:2019-05-24 05:29:26

标签: angular firebase web firebase-realtime-database angular7

我在使用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"}]

0 个答案:

没有答案