数组返回为未定义-依赖注入？ 角度/打字稿

Question

I assign an array data received from an endpoint.

I try to call this array in another file and it doesn't like it! My subsidiaryNames array consoles correctly.

My first file:

export class EngagementService {
    public orgSubSidNames = [];


    let subsidiaryNames = []
    data.forEach(sub => {
        console.log(sub.SubsidiaryName)
        subsidiaryNames.push(sub.SubsidiaryName)
    })
    subsidiaryNames = subsidiaryNames.filter(this.onlyUnique);
    console.log('subsidiary name array' + subsidiaryNames)
    this.orgSubSidNames = subsidiaryNames;

    // This is just a sample script. Paste your real code (javascript or HTML) here.

    if ('this_is' == /an_example/) {
        of_beautifier();
    } else {
        var a = b ? (c % d) : e[f];
    }

Second File:

export class EngagementFilterComponent implements OnInit {
    public subSidNameArray: EngagementService;


    updateSub(data) {
        console.log(data);
        console.log('attempting to print the subsid array' + this.subSidNameArray.orgSubSidNames)
    }

I get the error:

 Cannot read property 'orgSubSidNames' of undefined

Answer 1

您永远不会设置属性的值public subSidNameArray: EngagementService;

Answer 2

In the code that creates EngagementFilterComponent

const filter = new EngagementFilterComponent()
filter.subSidNameArray = new EngagementService()

or set it in constructor

public subSidNameArray: EngagementService = new EngagementService()

or use injection

If your framework uses injection, make sure your receiving component uses a proper constructor. constructor(private engagementService: EngagementService)

Explanation

The line

 public subSidNameArray: EngagementService

declares that your class contains an instance of EngagementService . You have not created one yet. An instance of the class must be created using the new keyword. The :EngagementService part is typescript for declaring the type that subSidNameArray is, a feature not found in ordinary javascript . It does not create an instance though.

Answer 3

subSidNameArray needs to be initialized somewhere, not just declared. As others have answered, you can make an explicit assignment to it with new EngagementService() , but if you use Angular, the "correct" way to do it would be to use dependecy injection (DI) in your second file:

constructor(private engagementService: EngagementService) {...}

Make sure that your EngagementService is injectable, by adding the @Injectable decorator before the class declaration:

@Injectable({
    providedIn: 'root'
})
export class EngagementService {
  ...
}