はtypescriptですコンストラクタでAPIを呼び出すと、エラーTS5055

Question

にエラーがスロー私は以下のようなダッシュボードのコンストラクタから顧客のリストを取得するにはGET APIを呼び出すためにしようとしている：

 // tslint:disable-next-line:max-line-length 
    constructor(public addCustomerDialog: MatDialog, private router: Router, private route: ActivatedRoute, private customerService: CustomerService) { 
    this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/login'; 
    this.customerList = getCustomers(); 
    } 

    getCustomers() { 
    const jwt = localStorage.getItem('jwt'); 

     // call AJAX 
    this.customerService.getCustomers(jwt).subscribe((res) => { // <--- 
     console.log(res); 
    }, (err) => { // <--- 
     alert('Token expired. Need to login again!'); 
     this.router.navigateByUrl(this.returnUrl); 
     console.log(err); 
    }); 

    } 

私はエラーの下に取得しています：

ERROR in error TS5055: Cannot write file '/home/spartan/Documents/development/ktf-standalone/api/config/main.js' because it would overwrite input file. 
    Adding a tsconfig.json file will help organize projects that contain both TypeScript and JavaScript files. Learn more at https://aka.ms/tsconfig. 
error TS5055: Cannot write file '/home/spartan/Documents/development/ktf-standalone/api/controllers/controllerCustomer.js' because it would overwrite input file. 
    Adding a tsconfig.json file will help organize projects that contain both TypeScript and JavaScript files. Learn more at https://aka.ms/tsconfig. 
error TS5055: Cannot write file '/home/spartan/Documents/development/ktf-standalone/api/models/customer.js' because it would overwrite input file. 
    Adding a tsconfig.json file will help organize projects that contain both TypeScript and JavaScript files. Learn more at https://aka.ms/tsconfig. 

私のルートフォルダにtsconfig.jsonファイルがあります。

{ 
    "compileOnSave": false, 
    "compilerOptions": { 
    "outDir": "./dist/out-tsc", 
    "sourceMap": true, 
    "declaration": false, 
    "moduleResolution": "node", 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "target": "es5", 
    "typeRoots": [ 
     "node_modules/@types" 
    ], 
    "lib": [ 
     "es2017", 
     "dom" 
    ], 
    "allowJs": true 
    } 
} 

コンストラクタでいくつかの行をコメントアウトすると、私のサーバを起動できます。

コンストラクタでAPIを呼び出すのは正しい方法ですか？それとも、私はここに何もないのですか？

プロジェクト構造：

Answer 1

subscribeコールバックでcustomerListプロパティの値を設定するために、あなたのgetCustomers方法を変更します。あなたが好きなものでそれを行うことができます。また

this.customerService.getCustomers(jwt).subscribe(
    (res) => this.customers = res.json(), 
    (err) => // handle error; 
); 

、IIRC、角度のドキュメントは、コンストラクタでの基本的な変数のインスタンスの横にはあまりやってないことをお勧めします。私は自分のコンポーネントにOnInitインターフェイスを実装させ、インターフェイスを実装するときにはngOnInitメソッドで必要なAPI呼び出しを行います。

Answer 2

謝罪します。 私はcomponent.tsファイルとapiコントローラの両方で同じメソッド名 'getCustomers'を持っていました。

component.ts（dashboard.ts）ビジュアルスタジオのインポートメソッドを呼び出すためにメソッド名を入力したときに、私が気付かなかったapi controllerからメソッドをインポートしました。

私が正しい方法を呼んだとき、私の問題は解決されました。そして確かに議論は解決を導く思考のための食糧を与えました。