如何在 ionic 3 中显示数据？

Question

我无法在 ionic 中显示数据。如何在 ionViewWillEnter 中显示数据并在 laravel API 中使用 post 方法？

我尝试使用 console.log 调用数据来检查数据是否存在。我试过“console.log（this.id）；”在 ionViewWillEnter 中 this.authService 之前如下图。

kprofile.ts

ionViewWillEnter(){
        this.authService.postData(this.id,'viewProfileClinic').then((result) => {
          this.responsedata = result;
          console.log(result);
              this.usersClinic.email = this.responsedata.email;
                this.usersClinic.telno = this.responsedata.telno;
                this.clinic_regno = this.responsedata.clinic_regno;
                this.clinic_name = this.responsedata.clinic_name;
                this.site = this.responsedata.site;
                this.clinic_address = this.responsedata.clinic_address;
                this.zip = this.responsedata.zip;
                this.city = this.responsedata.city;
                this.state = this.responsedata.state;
        },(err) =>{

        });
  }

当我显示 console.log 结果时

没有临床数据

当我运行 ionic serve 时。

下面是api .api

    //VIEW ALL CLINIC PROFILE
        public function viewProfileClinic(Request $request)
        {
            $id =$request->id;
            $clinicID = $request->clinic_id;

            $count = RegisterClinic::where('clinic_id',$clinicID)->count();
            if($count == 1)
            {
                $clinicData = RegisterClinic::where('clinic_id',$clinicID)->first();        
                $callEmailTelno = User::where('id',$clinicData->uid)->first();

                $datamsg = response()->json([
                        'calldata' => 'Email:'.$callEmailTelno->email.' Telno:'.$callEmailTelno->telno
                                     .' Clinicregno:'.$clinicData->clinic_regno.' Clinicname:'.$clinicData->clinic_name
                                     .' Site:'.$clinicData->site.' Clinicaddress:'.$clinicData->clinic_address
                                     .' Zip:'.$clinicData->zip.' City:'.$clinicData->city.' State:'.$clinicData->state

                    ]);
                    return $datamsg->content();
            }
            else{

                $datamsg = response()->json([
                    'error' => array("text"=>"No clinic data.")
                ]);
                return $datamsg->content();
            }
        }

这就是我希望它在 .html 文件中以 ionic 形式显示的内容。

.html

<ion-list>
<p>Clinic Profile</p>
 <form #f="ngForm" (ngSubmit)="onSubmit(f)" class="list-form">
        <ion-item>
        <ion-label stacked>Clinic Email</ion-label>
        <ion-input type="text" name="usersClinic.email" [(ngModel)]="usersClinic.email">{{usersClinic.email}}</ion-input>
        </ion-item>

        <ion-item>
        <ion-label stacked>Telephone no.</ion-label>
        <ion-input type="text" name="usersClinic.telno" [(ngModel)]="usersClinic.telno">{{usersClinic.telno}}</ion-input>
        </ion-item>

        <button ion-button color="light" class="transparent-button" [disabled]="!f.valid" text-center round>
          Edit
        </button>
      </form>
      <ion-item>
        <p>Clinic Registration no</p>
        {{clinic_regno}}
      </ion-item>
      <ion-item>
          <p>Clinic Name</p>
          {{clinic_name}}
      </ion-item> 
      <ion-item>
          <p>Clinic Site</p>
          {{site}}
      </ion-item>
      <ion-item>
          <!-- <p>Clinic Address</p>  -->
          <ion-label primary>Clinic Address</ion-label>
           <!-- <ion-textarea>{{clinic_address}},{{zip}},{{city}},{{state}}.</ion-textarea> -->
           <ion-textarea rows="6" disabled [value]="clinic_address" ></ion-textarea>
      </ion-item>


    </ion-list>

postman 中的 api 响应如下。

{"calldata":"Email:jumin@hu.cm Telno:0148232323 Clinicregno:87234824 Clinicname:Klinik Ikhlas Site:www.wuu Clinicaddress:UTC Central Market Zip:87000 City:Labuan State:Wilayah Persesekutuan Labuan"}

下面是我的 authService.ts 文件，我把我的 postData 方法。

postData(credentials, type) {

    let headers = new Headers({
      'Content-Type': 'application/json'
    });
    let options = new RequestOptions({ headers: headers });

    return new Promise((resolve, reject) => {
      this.http.post(apiUrl + type, JSON.stringify(credentials), options)
        .toPromise()
        .then((response) => {
          console.log('API Response : ', response.json());
          resolve(response.json());
        })
        .catch((error) => {
          console.error('API Error : ', error.status);
          console.error('API Error : ', JSON.stringify(error));
          reject(error.json());
        });
    });
  }

Answer 1

不确定这是否适合您，但对于我的 API 响应，它也以 json 的形式出现，但我没有将其提取为 json，而是运行：

this.responsedata = (JSON.stringify(result));

那么，

this.responsedata = JSON.parse(this.responsedata);

另外，另一种可能是 API 未正确格式化数据。我确定您已经在 API 上回显了您的数据，但是那里可能存在问题，因为您正在获取 else 回调。所以也许从 if 语句开始。

PS- 有时，如果格式不正确，标题可能会很痛苦，如果您在标题中传递令牌或任何类型的数据，有时 Angular/Ionic 比邮递员对数据更敏感。