Angular5对象初始化及动态表单问卷服务实例报错排查求助

Hey there! Let's work through why you're hitting that "questionnaireobj is not defined" error when using your question.service.ts's add() function. This usually boils down to issues with how you're creating/exporting the instance or how you're referencing it elsewhere. Here are the key checks to run:

1. Verify Instance Creation & Export in questionnaireObj.ts #

First, make sure you're actually creating a valid instance and exporting it so other files can access it.

If you're using a class-based approach, double-check you've instantiated the class and exported the instance:

// questionnaireObj.ts
import { Question } from './question-base'; // Import your question type

export class Questionnaire {
  id: string;
  poster: string;
  questions: Question[];

  constructor(id: string, poster: string, questions: Question[]) {
    this.id = id;
    this.poster = poster;
    this.questions = questions;
  }
}

// Critical: Export the actual instance with your data
export const questionnaireobj = new Questionnaire(
  'q-001',
  '/assets/survey-poster.jpg',
  [/* Your array of question-textbox/question-dropdown instances */]
);

If you're using a plain object literal, ensure you export it properly:

// questionnaireObj.ts
import { Question } from './question-base';

export const questionnaireobj = {
  id: 'q-001',
  poster: '/assets/survey-poster.jpg',
  questions: [/* Your question objects */]
};

Big gotcha: Don't forget the export keyword—without it, your service can't import this instance.

2. Check Import Path & Variable Spelling in question.service.ts #

Next, confirm you're importing the instance correctly in your service:

• Path accuracy: If questionnaireObj.ts is in the same folder as your service, the import should look like this:

  // question.service.ts
  import { questionnaireobj } from './questionnaireObj'; // Match the filename exactly (case-sensitive!)
  

  If it's in a subfolder, adjust the path (e.g., ../models/questionnaireObj).
• Variable name match: Ensure the imported name matches exactly what you exported. If you exported questionnaireobj (lowercase), don't accidentally write QuestionnaireObj or questionnaireObj in your service—JavaScript/TypeScript is case-sensitive.

3. Confirm You're Using the Correct Variable in the add() Call #

Make sure when you call add(), you're passing the imported instance, not an undefined local variable. For example:

// question.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { questionnaireobj } from './questionnaireObj';

@Injectable({ providedIn: 'root' })
export class QuestionService {
  constructor(private http: HttpClient) {}

  addQuestionnaire() {
    // Double-check you're using the imported questionnaireobj here
    return this.http.post('/api/questionnaires', questionnaireobj)
      .subscribe(response => {
        console.log('Questionnaire added:', response);
      });
  }
}

Avoid accidental local variable declarations like let questionnaireobj; (which would overwrite the imported instance and leave it undefined).

4. Rule Out Module/Scope Issues (For Framework Projects) #

If you're using Angular or a similar framework, ensure:

• The file containing questionnaireobj is part of a module that's imported into your app module, or the service is properly provided.
• You haven't accidentally scoped the instance to a local block (e.g., inside a function) where the service can't access it.

Start with the first two checks—they're the most common culprits for this error. If you still run into issues, sharing snippets of your questionnaireObj.ts and the relevant part of question.service.ts would help narrow it down further!

内容的提问来源于stack exchange，提问作者Yang Stark