anggari2 ngOnInit () da api-dan ma'lumotlarni olishda ishlamaydi

comment.component.ts:

import { Component, OnInit } from '@angular/core';
import { Router} from '@angular/router'
import { Comment } from 'comment entity path'
import {CommentService} from 'comment service path'
import { Observable } from 'rxjs/Observable';
@Component({
    template: ` 
  • {{comment.Name}}
`
})
export class CommentComponent implements OnInit {
    comments: Observable;  

    constructor(private router: Router, private commentService: CommentService) {
    }

    ngOnInit() {
        this.comments = this.getComments();
    }

    getComments() {
        return this.commentService.getComments();
    }

}

comment.service.ts

import { Injectable } from '@angular/core';
import { Headers, Http, Response } from '@angular/http';
import { Comment } from 'comment path here';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

@Injectable()
export class CommentService {
    private commentUrl = 'api path'; //URL to web api

    constructor(private http: Http) {
    }

    getComments(): Observable {
        return this.http.get(this.commentUrl).map(
            (response) => {
                let data = response.text() ? response.json():[{}];
                if (data) {
                    console.log(data);
                    return data;
                }
                return data;
            });
        }
    }

ngOnInit usulida sharhlar ro'yxatini olishim mumkin, lekin muammo ngFor dan foydalanib, ro'yxatni majburiy emas. Buning sababi, HTML javobdan oldin ishlaydi. Biroq, yangilangan sahifa ma'lumotlari avtomatik ravishda bog'lanadi. Biror narsani yo'qotaymi?

4
kod bloklaringizni formatlashni sinab ko'ring, shuning uchun boshqalar savolingizni tushunish oson bo'ladi.
qo'shib qo'ydi muallif Pengyy, manba
Taklif uchun rahmat, men kod blokini yangiladim.
qo'shib qo'ydi muallif Krishna, manba

7 javoblar

ma'lumotni yuklash uchun async trubasidan foydalaning.

1
qo'shib qo'ydi

Bitta echim sharhlaringiz yuklanganidan keyin faqatgina ul ni namoyish qilishdir, bu esa yangilanishni majbur qiladi. Shu kabi bir narsa:

  • {{comment.Name}}

Shunday qilib, sharhlar yuklanganidan so'ng, burchak yangilanishni majbur qiladi va ul DOMga qo'shiladi va shu nuqtada u barcha kerakli ma'lumotlarga ega bo'ladi sharh uchun li .

1
qo'shib qo'ydi
@Krishna bu faqatgina comments sizning kuzatilganingiz tugamaguncha aniqlanmasa ishlaydi. Bo'sh qator sifatida uni tanlasangiz, * ngIf = "comments.length> 0"
qo'shib qo'ydi muallif Rob Gwynn-Jones, manba
Men bu echimdan foydalanganman, lekin bu ishlamayapti.
qo'shib qo'ydi muallif Krishna, manba
Bu shuningdek @Rob Gvinn-Jons ishlamaydi
qo'shib qo'ydi muallif Krishna, manba

Komponentni va uning komponentlarini o'zgartirishni kuchli aniqlash uchun ChangeDetectorRef sinfidan foydalanishingiz mumkin. Quyidagi kabi ChangeDetectorRef tipidagi sinf xususiyatini yaratishingiz kerak bo'ladi:

private cdr: ChangeDetectorRef

OnInit() da ma'lumotlarni yuklagandan so'ng, o'zgarishlarni aniqlashni qo'lda bajarish uchun faqatgina detectChanges() usulini chaqiring:

this.cdr.detectChanges();

OnInit/AfterViewInit-dan API-ni chaqiradigan angular2 bilan bir xil muammoga duch keldim va bindings ko'rinishda yangilanmadi (ochiladigan tomondagi ko'rinish ko'rinishda joylashmagan). Yuqoridagi yondashuv men uchun ishlagan, ammo ildiz sababi hali ham menga ma'lum emas.

Iltimos, bu muammo uchun ildiz sababi menga murojaat qiling, chunki men buni topolmayapman.

1
qo'shib qo'ydi

Mana bu masalani qanday hal qildim:

//initialize the variable comment 
comments: comment[]; //this is given you have a comment model.

Shunga qaramasdan, this.classroom dan foydalanmasligingiz kerak:

this.comments = data | [];
1
qo'shib qo'ydi
qo'shib qo'ydi muallif Govind Samrow, manba

Ul tegida ngFor qo'shib ko'ring

  • {{comment.Name}}
`

or

  • {{comment.Name}}
`

balki siz butun kodingizni joylashtirmagan bo'lsangiz ham, men xizmat komponentining bir qismini ko'rmayapman.

siz uni ishlatmoqchi bo'lgan tarkibiy qismga xizmatni import qilish va AOK qilishingiz kerak bo'ladi. Komponentli konstruktorda

    import {CommentService} from '../path to service'

    constructor(private commentService: CommentService) 
    {

    //you can call the getcomments service here itself or in ngOnInit
    this.commentService.getComments().subscribe(data =>    
                 {    
                   console.log(data)
                  }
    } //end constructor

Umid qilamanki, siz sharhlaringizning xizmati console.log orqali ma'lumotlarni qaytarayotganligini tekshirishgansiz

0
qo'shib qo'ydi
sharhlovchini ijodkorga qo'ng'iroq qilish uchun kodni qo'shishga harakat qildingiz
qo'shib qo'ydi muallif Vinay Prabhakaran, manba
Men barcha kodni yubormadim. Men bu yerda CommentService-ni import qilgandim. va xizmatga @Injectable() dekoratatorini ishlaymiz. hatto konsoli xatolik yo'q.
qo'shib qo'ydi muallif Krishna, manba
Ha, men sinab ko'rdim, lekin sharh tuzuvchisi @vinay ishlamadi
qo'shib qo'ydi muallif Krishna, manba

Try this
template:

  • {{comment.Name}}
comments: Observable;  
    ngOnInit() {      
       this.comments = this.getComments();
    }

    getComments() {      
     return this.commentService.getComments();   
   }

Kodingizda 2 ta muammo bor 1. Har qanday qiymat qaytarmasdan xaritani chaqirasiz. 2. Obuna bo'lish o'rniga xarflar ichida qiymatlarni belgilashga harakat qilasiz, lekin qiymatlar ngOnInit-ga obuna bo'lgandan so'ng aniqlanmagan.

0
qo'shib qo'ydi
Siz taklif qilgan kodimni yangiladim. biroq shu masalada hali ham qoldim.
qo'shib qo'ydi muallif Krishna, manba
 I have found a solution of my issue using Zone and promise.
 below is the update code of the "comments.component.ts".
 by using zone.run(), I am able to bind data with HTML when
 "comments.component" is loaded.    

Agar ma'lumot api yordamida keladigan bo'lsa, bu ma'lumotlarni HTML bilan bog'lashning to'g'ri yo'li bormi?

    import { Component, OnInit, NgZone } from '@angular/core';  //NgZone *
    import { Router} from '@angular/router'
    import { Comment } from 'comment entity path'
    import {CommentService} from 'comment service path'
    import { Observable } from 'rxjs/Observable';
    import 'rxjs/add/operator/toPromise'  //*
    @Component({
        template: `
  • {{item.Name}}
`
    })
    export class CommentComponent implements OnInit {
        comments: comment[]=[];  //*

        constructor(private router: Router, private commentService: CommentService, private zone: NgZone) {
        }

        ngOnInit() {

          this.zone.run(() => {
            this.getComments().toPromise().then((data) => {
                this.comments= data || [];
            });
            })
         }

        getComments() {
            return this.commentService.getComments();
        }

    }
0
qo'shib qo'ydi
Angular Uzbekistan
Angular Uzbekistan
107 ishtirokchilar

Guruh Angular bo'yicha muloqot qilish uchun ochilgan Sizni qiziqtirsa: @nodejs_uz @react_uz @angular_uz @yiiframework_uz @js_uzb @typescript_uzb @vuejs_uz @ngTashkent @laravel_uz @uzdevgroup Ish o'rinlari @UzDev_jobs

ngTashkent
ngTashkent
77 ishtirokchilar

Правила просты: 1. Не хамить 2. Не хейтить 3. Реакт не нужен Ссылки: https://t.me/angular_ru - старший брат https://t.me/angular_uz - ангулар на узбекском @js_uzb @vuejs_uz @react_uz @nodejs_uz @yiiframework_uz @uzdevgroup @UzDev_Jobs @tasdev_talks