如何从 ionic 中的打字稿方法调用外部 javascript 文件？

Question

我在 javascript 文件中有一个 json 列表，我想在将结果数组发送到 html 主页之前用打字稿对其进行过滤。但是，我在 html 文件中遇到错误。

注意：我使用在线打字稿编辑器测试了我的代码，它运行良好。

Javascript 文件 list.js

   var jsonList= [
  {
    "Answer": "Y",
    dummyProp1 : 1
  },
{
    "Answer": "N",
    dummyProp1 : 1
  }];

打字稿文件：home.ts

import { Component,OnInit } from '@angular/core';
import 'src/assets/list.js';

declare var list:any[];
declare var jsonlist:any[];

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {

  constructor() {
  }
//extract only yes answers

ngOnInit() {
  function filterJson() {
    return this.list.filter(e => (
      (e.Answer.indexOf('Y') === 0) 
    ))
  }
  
  var o = filterJson();
  
  //get only Answers
  
  for(var key in o) {
    var infoJSON = o[key];
    jsonlist.push(infoJSON.Answer)
  }
  
  console.log(jsonlist);
}
}

主页索引文件：

<body>
  <app-root></app-root>
  <script type="text/javascript" src="src/assets/list.js"></script>
</body>

主页文件：home.html

<div *ngFor="let item of jsonlist">
<ion-item>
  <ion-label><b>{{item}}</b></ion-label>
</ion-item>

错误：属性 'jsonlist' 在类型 'HomePage' 上不存在 'HomePage'.ngtsc(2339) home.page.ts(11, 49): 组件首页模板错误

Answer 1

您的 json 文件无效 json。在 json 格式中你不能定义变量，你应该只在 json 文件中定义你的数据。

一个有效的 json 示例。

[
  {
    "Answer": "Y",
    "dummyProp1" : 1
   },
   {
    "Answer": "N",
    "dummyProp1" : 1
   }
]

在打字稿中，declare 表示未知引用的声明（以便能够帮助构建），您不能像变量一样访问声明。

在 angular 模板中，您应该只访问组件 class 中的属性。您不应该（也可能不能）访问组件外部的变量 class.

使用打字稿代替 json

如果您的 json 值在构建完成后不需要更改，您可以将其创建为 .ts 文件并从该文件导出 json 数组。

mydata.ts

export default [
  {
    Answer: "Y",
    dummyProp1: 1,
  },
  {
    Answer: "N",
    dummyProp1: 1,
  },
];

在您的组件中，您可以导入 myData 并将其分配给您的属性。

import mydata from "./mydata";


    export class HomePage { 
    
      dataList: Array<{ Answer: string; dummyProp1: number }>;
      ngOnInit() {
        this.dataList = myData;
// You can do all your operation, binding, filtering etc. from dataList property
       }
    }

如果您必须使用 .json 文件，您可以检查，并将导入的值分配给组件属性。

但是如果你需要在构建后更改这个 json 文件或者你想在服务器中提供这个文件（使用分发工具或类似的东西）你必须使用 HttpClientModule 或其他使用 http/web-socket 请求获取数据的工具。

有关 HttpClientModule 的更多信息，您可以查看此博客 post。

如何从 ionic 中的打字稿方法调用外部 javascript 文件？

How to call external javascript file from typescript method in ionic?

typescript

ionic-framework

angular