My component is missing the ChangeDetectorRef in Nativescript

Question

My component is missing the ChangeDetectorRef in Nativescript

I am attempting to automatically update an array within a Listview by utilizing ChangeDetectorRef in the following way:

import { Component, OnInit, ChangeDetectionStrategy, Input, ChangeDetectorRef } from "@angular/core";

@Component({
    selector: "register",
    templateUrl: "./register.html",
    styleUrls: ["./register.css"],
    changeDetection: ChangeDetectionStrategy.OnPush
})

export class RegisterComponent implements OnInit {

@Input regis = Array<string>;

constructor(cdr: ChangeDetectorRef){}

ngAfterContentChecked() {
    this.cdr.detectChanges();
}

However, I encountered this error :

error TS2339: Property 'cdr' does not exist on type 'RegisterComponent'.

Can someone clarify what I may have misunderstood?

angular typescript nativescript angular2-changedetection

Answer 1

Answer №1

In the constructor, it's just a local variable until you define an accessor like public or private.

import { Component, OnInit, ChangeDetectionStrategy, Input, ChangeDetectorRef } from "@angular/core";

@Component({
    selector: "register",
    templateUrl: "./register.html",
    styleUrls: ["./register.css"],
    changeDetection: ChangeDetectionStrategy.OnPush
})

export class RegisterComponent implements OnInit {

@Input regis = Array<string>;

constructor(private cdr: ChangeDetectorRef){}

ngAfterContentChecked() {
    this.cdr.detectChanges();
}

Answer 2

In the constructor, it's just a local variable until you define an accessor like public or private.

import { Component, OnInit, ChangeDetectionStrategy, Input, ChangeDetectorRef } from "@angular/core";

@Component({
    selector: "register",
    templateUrl: "./register.html",
    styleUrls: ["./register.css"],
    changeDetection: ChangeDetectionStrategy.OnPush
})

export class RegisterComponent implements OnInit {

@Input regis = Array<string>;

constructor(private cdr: ChangeDetectorRef){}

ngAfterContentChecked() {
    this.cdr.detectChanges();
}

Answer 3

Answer №2

When constructing an object, you are essentially taking in a parameter. If you want to define this as a shorthand property, you need to explicitly specify the visibility level.

constructor(public cdr: ChangeDetectorRef){}
constructor(protected cdr: ChangeDetectorRef){}
constructor(private cdr: ChangeDetectorRef){}

If not, cdr will only be accessible within the constructor itself.

Answer 4

When constructing an object, you are essentially taking in a parameter. If you want to define this as a shorthand property, you need to explicitly specify the visibility level.

constructor(public cdr: ChangeDetectorRef){}
constructor(protected cdr: ChangeDetectorRef){}
constructor(private cdr: ChangeDetectorRef){}

If not, cdr will only be accessible within the constructor itself.

My component is missing the ChangeDetectorRef in Nativescript

Answer №1

Answer №2

Similar questions

Angular sends a blank object to the server

Steps for sending HTTPS requests from Angular 6 to Node.js

Setting the "status" of a queue: A step-by-step guide

Encountering an issue with Auth0 and Angular2: "The supplied parameters do not match any signature of call target."

JS- Catching Errors Inside and Outside

Issues with user-generated input not properly functioning within a react form hook

The bar graph dataset is not correctly configured when utilizing ng2 charts and ng5-slider within an Angular framework

Guide to indicating the data type for RactiveForm within Angular versions 4 and above

Show every item from a collection on individual lines within an Angular2 module

Angular 2 offers a powerful feature called ngFor that allows developers to

When using multiple select tags with *ngFor in Angular, modifying the value of the first select tag will have an

Using Typescript with Material UI Select

Troubleshooting the Hover Effect of Buttons in Next.js when Using Tailwind CSS for Dynamic Color Changes

Angular 2 Material Primary Focus

Guide to implementing an enum in an Angular Component

Service consumption across various components is failing to function as intended

I'm unable to import correctly using the --compiler option

Error encountered in Next.js: The function 'useLayoutEffect' was not successfully imported from 'react' (imported as 'React')

I haven't encountered any type warnings in the places where I anticipated them

Guide on transferring the Token from the initial response request to the header of the second request, with the help of Axios in an Ionic React application (Making 2 Post Requests