1. Здраво и добредојдовте на форумот на IT.mk.

    Доколку сеуште не сте дел од најголемата заедница на ИТ професионалци и ентузијасти во Македонија, можете бесплатно да се - процесот нема да ви одземе повеќе од 2-3 минути, а за полесна регистрација овозможивме и регистрирање со Facebook и Steam.
    Сокриј

Angular Routing проблем со превземање податоци

Дискусија во форумот 'HTML, CSS, JavaScript, XML базирани' започната од D3N1EL, 14 Февруари 2019.

  1. D3N1EL

    D3N1EL
    Practice makes perfect

    2,829
    1,351
    10 Август 2010
    Машко
    Почнав да учам Angular, имам некоја лесна задача, која е доста слична со таа што е во Angular Tour of Heroes. Во кратки црти, имам список на работници прикаќани во табела со некоја основна информација. При клик на некој од работниците, треба да ми отвори подетална информација.

    Како ми е реализирано до сега. Имам 2 компоненти (TableViewComponent и ViewProfileComponent), TableView се прикажува на главната страна (localhost:4200) и DataService, преку кој иде комуникацијата со базата. Како база избрав Firebase.

    Проблем е следното. На главната страна, во TableViewComponent се ми работи идеално, но при премин на нечив профил неможам да извлечам податоци, бидејќи фукцијата која треба да ми врати кључ од работникот ми враќа undefined.
    Овој метод работи и ми враќа клуч кога сум на главна(во TableViewComponent, localhost:4200)
    Код:
    private _findEmployeeById(id: number): string {
        const ref = this.db.database.ref();
        let key: string;
    
        ref.child('/employee/').orderByChild('id').equalTo(id).once('value', snap => {
          snap.forEach(data => {
            key = data.key;
          });
        });
    
        return key;
      }
    Истиот метод кога сум преминат на линк како localhost:4200/view/:id враќа undefined на key. Доколку му впишам рачно клуч кај ref.child('/employee/и некој клуч') немам проблем.

    Што правам погрешно?

    Еве линк до гит со целосен проект.
    d3n1el1/nc-final-project

     
  2. Најдобар одговор:
    Пост #6 од D3N1EL, 16 Февруари 2019
  3. Blagojce

    Blagojce
    Gaining Experience

    873
    58
    26 Декември 2007
    Машко
    Програмер
    Во
    Код:
    table-view.component.html
    не треба
    Код:
    routerLink="/view/{{employee.id}}"

    да биде во
    Код:
    *ngFor="let employee of employeeList
    туку во
    Код:
    <td>{{employee.fname}}</td>
    пример
    Код:
    <a [routerLink]="['/edit', employee.id ]" routerLinkActive="router-link-active">{{employee.fname}}</a>
     
    На bxxxn му/ѝ се допаѓа ова.
  4. D3N1EL

    D3N1EL
    Practice makes perfect

    2,829
    1,351
    10 Август 2010
    Машко
    Проблемот сеуште остана. Кога сум на било кој линк, различен од localhost:4200 (пример localhost:4200/view/333) DataService-от не може да ми го најде клуч од објектот кој содржи поле id со вредност 333.

    Истата функција за пребарување на клуч потполно работи на localhost:4200, т.е. на "Домашната страница".

    Направив само console.log(key) во getEmployeeDataById() во DataService, можеби така ќе биде појасно.
    d3n1el1/nc-final-project
    1.jpg
     
  5. D3N1EL

    D3N1EL
    Practice makes perfect

    2,829
    1,351
    10 Август 2010
    Машко
    Проблемот е најден

    Наместо:
    Код:
    private _findEmployeeById(id: number): string {
        const ref = this.db.database.ref();
        let key: string;
    
        ref.child('employee').orderByChild('id').equalTo(id).once('value', snap => {
          snap.forEach(data => {
            key = data.key;
          });
        });
    
        return key;
      }
    Треба
    Код:
    private _findEmployeeById(id: number): Promise<string> {
        const ref = this.db.database.ref();
        let key: string;
    
        return ref.child('employee').orderByChild('id').equalTo(id).once('value').then(snap => {
          snap.forEach(data => {
            key = data.key;
          });
          return key;
        });
      }
    Соодветно, за да се добие информација со помош на оваа функција, треба да се повика вака
    Код:
    getEmployeeDataById(employeeID: number): Promise<any> {
        return this._findEmployeeById(employeeID).then(nkey => {
          this.db.object('/employee/' + nkey).valueChanges().subscribe(obj => {
            return obj;
          });
        });
      }
    Сега нареден проблем е што оваа функција се Resolve-нува прерано во компонентот, каде што се повикува.
    Во компонентата вака се повикува.
    Код:
    getEmployeeData(): void {
        const id = +this.activeRoute.snapshot.paramMap.get('id');
        this.dataService.getEmployeeDataById(id).then( x => {
          this.employeeToShow = x;
        });
      }
    Некои идеи зошто?
     
  6. Blagojce

    Blagojce
    Gaining Experience

    873
    58
    26 Декември 2007
    Машко
    Програмер
    Да пробаш да го имплементираш AfterViewInit интерфејсот и таму да ја повикаш ф-јата.
     
  7. D3N1EL

    D3N1EL
    Practice makes perfect

    2,829
    1,351
    10 Август 2010
    Машко
    Сфатив дека Observable и Promise не се сакаат помеѓу себе. :)

    Ете го целосно решението:
    DataService.ts
    Код:
    updateEmployeeInfo(employeeInfo: Employee): Observable<void> {
        const ref = this.db.database.ref('/employee/');
        return this._findEmployeeById(employeeInfo.id)
          .pipe(flatMap(key => {
            const promise = ref.child(key).update(employeeInfo);
            return from(promise);
          }));
      }
    
      removeEmployeeFromList(removeEmployee: Employee): Observable<void> {
        const ref = this.db.database.ref();
        return this._findEmployeeById(removeEmployee.id).pipe(flatMap(key => {
          const promise = ref.child('/employee/' + key).remove();
          return from(promise);
        }));
      }
    
      getEmployeeDataById(employeeID: number): Observable<any> {
        return this._findEmployeeById(employeeID)
          .pipe(flatMap(nkey => {
            return this.db.object('/employee/' + nkey).valueChanges();
          }));
      }
    
      private _findEmployeeById(id: number): Observable<string> {
        const ref = this.db.database.ref();
        let key: string;
    
        const promise = ref.child('employee').orderByChild('id').equalTo(id).once('value').then(snap => {
          snap.forEach(data => {
            key = data.key;
          });
          return key;
        });
        return from(promise);
      }
    Соодветно во самата компонента:
    ViewProfileComponent
    Код:
    employeeToShow$: Observable<any>;
    
    getEmployeeData(): void {
        const id = +this.activeRoute.snapshot.paramMap.get('id');
        this.employeeToShow$ = this.dataService.getEmployeeDataById(id)
          .pipe(tap(employee => {
            console.log('employee in view profile', employee);
          }));
      
    Ќе си се обележам, можеби на некој ќе му потреба. :)
     

Сподели

Вчитување...