элементы внутри * ngFor не отображаются - PullRequest
Новая
       20

элементы внутри * ngFor не отображаются

0 голосов
/ 01 августа 2020

У меня есть четыре запроса внутри ngOnInit, как показано здесь: 


orders = [];
answers = [];

constructor(
    private profileService: ProfilesService,
    private storeService: StoreService,
    private quizService: QuizService
) { }

ngOnInit(): void {

    this.idUser = this.authService.getInfo().user._id

    this.profileService.getOrders(this.idUser).subscribe(res => {
        if (res['success']) {
            this.orders = res['orders'];
            this.orders.forEach(order => {
                order.products.forEach((product, index) => {
                    this.storeService.getSingleProduct(product.idProduct).subscribe(res => order.products[index] = res['product'].nameProduct)
                });
            })

            this.profileService.getAnswer(this.idUser).subscribe((answers: any) => {
                this.answers = answers.answers;
                this.answers.forEach((quiz, index) => {
                    this.quizService.getSingleQuizById(quiz.idQuiz).subscribe((res: any) => {
                        this.answers[index].titleQuiz = res.quiz.titleQuiz;
                        this.answers[index].categoryQuiz = res.quiz.categoryQuiz;
                    })
                });
            })
        }
    })
}

getOrders (): в основном получает заказы от http, и он работает

getSingleQuizById (): получает информационный порядок из http, и он работает

getAnswer: получать все ответы пользователей от idUser

getSingleQuizById: get информация для викторины от idQuiz, которая внутри ответов

* ngFor не отображается, но в ответах нет ошибки

html

              <div class="answer" *ngFor="let answer of answers">
                  <div  class="order-body flex-order">
                  <div class="part-answer">
                    {{answer.titleQuiz}}
                  </div>
                </div>
            </div>

enter image description here

service answer

getAnswer(idUser){
    const token = localStorage.getItem(AppUtil.AUTH_TOKEN);
    const headers = new HttpHeaders({ 'Authorization': `Bearer ${token}` });
    return this.httpClient.get(this.apiUrl + `/answer/${idUser}`, { headers });
}

обновление это еще код html

              <div class="card-answer">
                  <div class="header flex">
                       <div class="part-answer"></div>
                       <div class="part-answer">
                          title Quiz
                       </div>
                  </div>

                  {{ answers | json }}

                  <div class="answer" *ngFor="let answer of answers">
                      <div  class="answer-body flex-answer">
                      <div class="part-answer">
                          test
                      </div>
                      <div class="part-answer">
                         {{ answers | json }} 
                         {{answer.titleQuiz}}
                       </div>
                     </div>
                 </div>
              </div>

css частичный ответ 

.card-answer .part-answer{
  padding: 0 12px;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 13.4px;
  flex-basis: 13%;
  text-align: center;
  word-break: break-word;
}

введите описание изображения здесь

1 Ответ

0 голосов
/ 02 августа 2020

, как указал @MikeOne, попробуйте, возможно, удалить вложенную подписку и заменить их на .toPromise следующим образом:

asyn c ngOnInit (): void {

this.idUser = this.authService.getInfo().user._id;
let res = await this.profileService.getOrders(this.idUser);
if (res['success']) {
    this.orders = res['orders'];
    this.orders.forEach(order => {
        order.products.forEach((product, index) => {
            let res = await this.storeService.getSingleProduct(product.idProduct);
            order.products[index] = res['product'].nameProduct;
        });
    });
}

let answers:any = await this.profileService.getAnswer(this.idUser);
this.answers = answers.answers;
this.answers.forEach((quiz, index) => {
    let res = await this.quizService.getSingleQuizById(quiz.idQuiz);
    this.answers[index].titleQuiz = res.quiz.titleQuiz;


      this.answers[index].categoryQuiz = res.quiz.categoryQuiz;
    })
}

async getAnswer(idUser){
    const token = localStorage.getItem(AppUtil.AUTH_TOKEN);
    const headers = new HttpHeaders({ 'Authorization': `Bearer ${token}` });
    return await this.httpClient.get(this.apiUrl + `/answer/${idUser}`, { headers }).toPromise;
}
...