ANGULAR - возврат данных в DOM из подписки () - PullRequest
Новая
       8

ANGULAR - возврат данных в DOM из подписки ()

0 голосов
/ 17 апреля 2020

Я пытаюсь вернуться с * ngДля данных компонента, найденных методом subscribe () в моем DOM, но ничего не происходит ...

Что я сделал не так?

Мой HTML: 

<ion-item detail="false" *ngFor="let chat of chats">
      <ion-row class="w100">
        <ion-col [size]="3">
          <div class="container-img-screenable">
            <img class="img-screenable" [src]="getContenderImg(chat.contenderID)" alt="">
          </div>
        </ion-col>
        <ion-col [size]="9">
          <div class="reposi">
            <h1 class="title">{{getContenderNameTruncated(chat.contenderID)}}</h1>
            <p class="text">{{getLastSentence(chat.chatID)}}</p>
          </div>
        </ion-col>
      </ion-row>
    </ion-item>

Одна из трех функций в моем Component.TS: 

getLastSentence(chatID:any){
    var path = '/Chats/' + chatID + '/lastMessage';
    this.CrudService.read(path).subscribe((lastSentence:any) => {
      return lastSentence
    })
}

Полезно знать: все функции возвращают хорошие данные, которые я проверил с помощью console.log, проблема возникает, когда я хочу вернуть его ... Я уверен, что это очевидно, но я новичок ie ...

Спасибо за вашу помощь !!

Ответы [ 4 ]

2 голосов
/ 18 апреля 2020

Проблема, которую я вижу, состоит в том, что функция getLastSentence не возвращает никакого значения. Я бы избавился от блока подписки и использовал asyn c pipe: 

<ion-item detail="false" *ngFor="let chat of chats">
      <ion-row class="w100">
        <ion-col [size]="3">
          <div class="container-img-screenable">
            <img class="img-screenable" [src]="getContenderImg(chat.contenderID)" alt="">
          </div>
        </ion-col>
        <ion-col [size]="9">
          <div class="reposi">
            <h1 class="title">{{getContenderNameTruncated(chat.contenderID)}}</h1>
            <p class="text">{{getLastSentence(chat.chatID) | async | json}}</p>
          </div>
        </ion-col>
      </ion-row>
    </ion-item>

И ваша функция getLastSentence будет выглядеть так и вернет Observable: 

getLastSentence(chatID:any): Observable<any> {
    var path = '/Chats/' + chatID + '/lastMessage';
    return this.CrudService.read(path);
}

Таким образом, вам не нужно беспокоиться об отмене подписки, потому что канал asyn c сделает это для уничтожения вашего компонента.

1 голос
/ 19 апреля 2020

вы должны сделать 

*ngFor="let chat of chats | async"

для подписки, вам это не нужно, потому что asyn c заботится о подписке и отписке. Однако, если вам нужно его использовать, не забудьте отписаться, иначе у вас может быть утечка памяти.

1 голос
/ 17 апреля 2020

Измените подписку на async / await 

async getLastSentence(chatID: string): Promise<string> {
    const path = `/Chats/${chatID}/lastMessage`;
    return await this.CrudService.read(path).toPromise()
}

Честно говоря, я бы на самом деле проверил, есть ли ответ, и проверим его значение. Дело в том, что вы не можете вернуться внутрь подписки, поэтому у вас есть несколько способов сделать это, это лучший вариант.

0 голосов
/ 19 апреля 2020
  1. Убедитесь, что у вас есть переменная chats
chats: Array<any>;
Затем присвойте результат вашего сервисного вызова переменной chats 
getLastSentence(chatID:any){
    var path = '/Chats/' + chatID + '/lastMessage';
    this.chats = this.CrudService.read(path);
}
Затем используйте канал async в шаблоне HTML для доступа к значениям в массиве чатов. 
<ion-item detail="false" *ngFor="let chat of chats | async">
      <ion-row class="w100">
        <ion-col [size]="3">
          <div class="container-img-screenable">
            <img class="img-screenable" [src]="getContenderImg(chat.contenderID)" alt="">
          </div>
        </ion-col>
        <ion-col [size]="9">
          <div class="reposi">
            <h1 class="title">{{getContenderNameTruncated(chat.contenderID)}}</h1>
            <p class="text">{{getLastSentence(chat.chatID) | async | json}}</p>
          </div>
        </ion-col>
      </ion-row>
    </ion-item>
...