我在 javascript 檔案中有一個 json 串列，我想在將結果陣列發送到 html 主頁之前在 typescript 中對其進行過濾。但是，我在 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”。ngtsc(2339) home.page.ts(11, 49)：組件主頁的模板中發生錯誤。
uj5u.com熱心網友回復：
您的 json 檔案不是有效的 json。在 json 格式中你不能定義變數，你應該在 json 檔案中定義你的資料。
一個有效的 json 示例。
[
{
"Answer": "Y",
"dummyProp1" : 1
},
{
"Answer": "N",
"dummyProp1" : 1
}
]
在打字稿中，宣告意味著一個未知參考的宣告（以便能夠幫助構建），您不能像變數一樣訪問宣告。
在角度模板中，您應該只訪問組件類中的屬性。您不應該（并且可能不能）訪問組件類之外的變數。
使用打字稿代替 json
如果您的 json 值在構建完成后不需要更改，您可以將其創建為 .ts 檔案并從該檔案匯出 json 陣列。
我的資料.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的更多資訊，您可以查看此博客文章。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/460323.html