CODEWITHSUNDEEP
angularangular6angular5nativescriptangular8
Kevin Dias
Kevin Dias

Reputation: 1076

View does not update when calling function from other component Angular + NativeSript(6)

View does not update when calling function from other component Angular + NativeSript. i'm calling a function to get some data and render but the data is not displayed in the component but in console log i can see the data is there. What i'm missing here?

My Tabcomponent here a call the function from other component:

@Component({
  providers: [CartoesComponent],
  selector: "ns-tabs",
  templateUrl: "./tabs.component.html",
  styleUrls: ["./tabs.component.css"],
  moduleId: module.id
})
export class TabsComponent implements OnInit {
  tabSelectedIndex: number;

  constructor(private card: CartoesComponent) {
    this.tabSelectedIndex = 0;
  }

  onSelectedIndexChanged(args: SelectedIndexChangedEventData) {
    if (args.oldIndex !== -1) {
      const newIndex = args.newIndex;
      if (newIndex === 0) {
        // the function im calling 
        this.card.getCards();
      }
    }
  }
}

My component where I have the function I'm calling:

@Component({
  selector: "Cartoes",
  moduleId: module.id,
  templateUrl: "./cartoes.component.html",
  styleUrls: ["./cartoes.css"]
})
export class CartoesComponent implements OnInit {
  processing = false;
  cardsData: any = null;
  cardsDetails: any = null;

  constructor() {}

  getCards(): void {
    this.processing = true;

    this.service.cardsWallet().subscribe((res) => {
      this.cardsData = res;

      this.cardsData.forEach((data: any) => {
        this.cardsDetails = data.cards;
      });

      // DISMISS LOADER
      this.processing = false;
    }, (err) => {
      this.processing = false;
      console.log(err);
    });
  }
}

My view component xml(html). My view stays blank, but in console.log i can see the data. And if call the function on ngOnInit it shows de view but when an call the function again it does not update.

<Carousel debug="false" height="200" width="100%" indicatorOffset="0, 0" indicatorColor="#00E676" finite="true" bounce="true" showIndicator="true" verticalAlignment="top" android:indicatorAnimation="SCALE" indicatorColorUnselected="#000" [items]="cardsDetails">
    <CarouselItem verticalAlignment="middle" *ngFor="let card of cardsDetails">
        <AbsoluteLayout width="auto">
            <!-- CARD IMG -->
            <Image src="~/images/cartoes/card4.png" width="325" class="card-img"></Image>
            <Image *ngIf="card?.cardBrand.cardBrandName === 'Mastercard'" src="~/images/cartoes/mastercard.png" width="50" class="card-img-detail"></Image>
            <Image *ngIf="card?.cardBrand.cardBrandName === 'Visa'" src="~/images/cartoes/visa.png" width="50" class="card-img-detail"></Image>
            <!-- CARD INFO -->
            <label text="{{card?.cardDescription}}" class="card-info-description"></label>
            <label text="{{card?.cardNumber}}" class="card-info-number"></label>
            <label text="{{card?.expirityDate | date:'MM/yy'}}" class="card-info-validade" textWrap="true"></label>
            <label text="{{card?.cardHolderName}}" class="card-info-nome" textWrap="true"></label>
        </AbsoluteLayout>
    </CarouselItem>
</Carousel>

Upvotes: 0

Views: 660

Answers (1)

Sergey Mell
Sergey Mell

Reputation: 8040

Actually, you've injected your component though and declared it as provider. 

  constructor(private card: CartoesComponent) {
    this.tabSelectedIndex = 0;
  }

This means that Angular created an instance of this component class and you can call its methods.

However, this instance does not refer to any really rendered components and is not bound to any template in your view. Thus, calling component instance methods should not affect anything in your case.

The correct way should be either refer to the component via ViewChild decorator (if it is located inside parent component). In this case, you operate with the exact rendered component and affect its template. Otherwise, you should use some service for communicating between components or sharing common data. Here you can find some comprehensive instructions regarding component communications.

The only thing, for now, I have no idea why calling ngOnInit handles situation because it shouldn't. I'll update my answer once I figure out what the case.

Upvotes: 2

Related Questions