如何在ionic 3中显示数据?

时间:2019-06-20 08:37:53

标签: android laravel api ionic-framework ionic3

我无法以离子形式显示数据。如何在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结果

  

没有诊所数据

当我运行离子发球时。

下面是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文件中以离子形式显示的原因。

.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>

邮递员中的api响应如下。

  

{“ calldata”:“电子邮件:jumin@hu.cm Telno:0148232323 Clinicregno:87234824诊所名称:Klinik Ikhlas网站:www.wuu诊所地址:UTC中央市场邮政编码:87000城市:Labuan省:Wilayah Persesekutuan Labuan”} < / p>

下面是我的 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());
        });
    });
  }

1 个答案:

答案 0 :(得分:0)

不确定这是否对您有用,但是对于我的API响应,它也以json的形式出现,而不是我以json的形式提取它:

  

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

然后

  

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

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

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