[解決済み] ionic 5 - ngForがデータを表示しない
2022-03-11 04:44:06
質問
データベースからのデータを表示するために、あらゆる方法を試しました。データはデータベースから送られてきますが、UI上にレコードが表示されません。データのためにconsole.logを印刷すると、それは正しく来る。以下は、私が使用したコードセグメントです。私はionicの開発は全く初めてなので、何か間違いがあれば親切に指摘してください。
タブ3.ページ.html
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
User List
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<ion-button expand="block" (click)="getData()" >Get All users</ion-button>
<ion-list>
<ion-item *ngFor="let Users of UserList">
<h2>Hello {{ UserList[Users].fullname.value }}</h2>
<p item-right> {{Users["email"]}}</p>
<p>{{Users.phone_no}}</p>
</ion-item>
</ion-list>
</ion-content>
tab3.page.ts
import { Component } from '@angular/core';
import { ToastController, AlertController, LoadingController, NavController } from '@ionic/angular';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import {} from '../Login/tab1.module';
import { CommonModule } from "@angular/common";
import { setIndex } from '@ionic-native/core/decorators/common';
@Component({
selector: 'app-tab3',
templateUrl: 'tab3.page.html',
styleUrls: ['tab3.page.scss']
})
export class Tab3Page {
UserList:any[];
LoginName:string = "";
constructor(public navCtrl: NavController, public http: HttpClient) {
}
ionViewDidLoad(){
console.log("Getting Users");
this.getData();
}
getData()
{
this.http.get("http://localhost/MyFirstApp/GetAllUsers.php")
.subscribe(
data => {
let UserList = JSON.parse(JSON.stringify(data));
console.log(UserList);
console.log(UserList[1].fullname);
let i=0;
for (let Users in UserList){
this.LoginName = UserList[Users].fullname;
}
},
err => {
console.log(err);
}
);
}
}
console.logウィンドウにデータベースからのデータが正しく表示されています。
UserList[
0: {fullname: "shubham", email: "[email protected]", phone_no: "1230235420"}
1: {fullname: "johan", email: "[email protected]", phone_no: "120356452"}
2: {fullname: "aditya", email: "[email protected]", phone_no: "120356452"}
]
解決方法は?
主に3つです。
-
を使用しました。
let
これはブロックスコープであるため、クラスには反映されません。解決策 変更
let UserList = JSON.parse(JSON.stringify(data));
からthis.UserList = JSON.parse(JSON.stringify(data));
. -
インデックスを配列の値に置かず、オブジェクトの値を渡しているため、バインディングの問題があります。
解決方法 変更
{{ UserList[Users].fullname.value }}
から{{Users.fullname}}
. -
をタイプアノテーションしたのみです。
UserList
オブジェクトは反復処理に使用されるからです。解決策 変更
UserList:any[];
からUserList:any[]=[];
.
関連
-
Angularが報告するインジェクションエラーとその解決方法...$injector:unpr]。
-
[解決済み] インデックスを属性値とするngFor
-
[解決済み] オブジェクトのキーと値に*ngForでアクセスする
-
[解決済み] Angular - すべてのリクエストにヘッダを設定する
-
[解決済み] 例外が発生しました。既知のネイティブプロパティではないため、'ngFor'にバインドできない
-
[解決済み】*ngIfと*ngForが同じ要素にあるとエラーになる件
-
[解決済み] NgModule.schemasにCUSTOM_ELEMENTS_SCHEMAを追加してもエラーが表示される。
-
[解決済み] AngularプロジェクトでBootstrapを使うには?
-
[解決済み] Angular Materialダイアログエリアの外をクリックしてダイアログを閉じないようにする(Angularバージョン4.0以上で使用可能)
-
[解決済み] index.tsは何に使われているのですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
angular.jsのエラーです。エラーです。[$injector:modulerr] 原因
-
Node Sass は現在の環境のためのバインディングを見つけることができませんでした。Windows 64ビット、Node.js 8.x。
-
[解決済み] ルーターリンク]と[ルーターリンク]の違いについて
-
[解決済み] formGroup' は 'form' の既知のプロパティではないため、バインドできません。
-
[解決済み] Angularで変更検知を手動でトリガーする
-
[解決済み] Angular + Material - データソース(mat-table)を更新する方法
-
[解決済み] viewchildを使用して複数のviewchildrenにアクセスする
-
[解決済み] Angular - "has no exported member 'Observable'" エクスポートされたメンバーがありません。
-
[解決済み] Angular HttpClient "パース中のHttp失敗"
-
[解決済み] AngularでngFor repeatをある数のアイテムに制限するにはどうすればよいですか?