从其他组件调用函数时视图不更新 Angular + NativeSript(6)

Question

从其他组件调用函数时，视图不会更新 Angular + NativeSript。我正在调用一个函数来获取一些数据并进行渲染，但是数据没有显示在组件中，但是在 console log 中我可以看到数据在那里。我在这里缺少什么？

我的Tabcomponent这里调用了其他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();
      }
    }
  }
}

我调用的函数所在的组件：

@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);
    });
  }
}

我的视图组件xml(html)。我的视图保持空白，但在 console.log 中我可以看到数据。如果在 ngOnInit 上调用该函数，它会显示 de view 但当再次调用该函数时，它不会更新。

<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>

Answer 1

实际上，您已经注入了您的组件并将其声明为提供者。

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

这意味着 Angular 创建了该组件的一个实例 class 您可以调用它的方法。

但是，此实例 不引用任何真正呈现的组件 并且未绑定到您视图中的任何模板。因此，调用组件实例方法不应影响您的情况。

正确的方法应该是通过 ViewChild 装饰器引用组件（如果它位于父组件内）。在这种情况下，您使用准确呈现的组件进行操作并影响其模板。否则，您应该使用一些服务来在组件之间进行通信或共享公共数据。 Here 您可以找到有关组件通信的一些综合说明。

目前唯一的问题是，我不知道为什么调用 ngOnInit 可以处理这种情况，因为它不应该。弄清楚情况后，我会更新我的答案。

从其他组件调用函数时视图不更新 Angular + NativeSript(6)

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

nativescript

angular

angular5

angular6

angular8