Question

我从API中提取食谱中的数据，我已经有一份工作正常的食谱列表，但我现在要求一个食谱细节（ 1个对象）。我的控制台日志是JSON的样子。无论我做什么，我无法在前端展示，请尽可能帮助。

打字稿

details: any;

loadDetails() {
  if (this.details) {
    return Promise.resolve(this.details);
  }

  return new Promise(resolve => {
    this.http.get('http://api.yummly.com/v1/api/recipe/Crustless-Ham-Savory-Bake-2005439?_app_id=//////&_app_key=/////')
      .map(res => res.json())
      .subscribe(data => {
        console.log(data);
        this.details = data;
        resolve(this.details);
      });
  });
}

HTML

<ion-content>
    <ion-list>
        <ion-item>
            <h1>{{details.id}}</h1>
        </ion-item>
    </ion-list>
</ion-content>

Pagename.ts

@Component({
  selector: 'page-details',
  templateUrl: 'details.html',
  providers: [ApiAuthentication]

})
export class DetailsPage {

  public api: any;

  constructor(public navCtrl: NavController, public navParams: NavParams, public apiAuthentication: ApiAuthentication) {
    this.loadRecipes();
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad DetailsPage');
  }

  loadRecipes(){
    this.apiAuthentication.loadDetails()
    .then(data => {
      this.api = data;
    });
  } 
}

Answer 1

您正在尝试显示

<h1>{{details.id}}</h1>

实际上你的对象是api：

loadRecipes(){
  this.apiAuthentication.loadDetails()
    .then(data => {
      this.api = data; // you store it in api!
  });

因此，只需更改模板即可清除这一点：

<h1>{{api.id}}</h1>

也许在这里添加安全导航操作符。 {{api?.id}}

Answer 2

你实际上正在尝试很多事情，可以用其中一种来完成。

你正在使用promise和observable，你可以避免其中一个。我会说默认使用observable。

class CamearService
{
   public static void startCamera(int cameraID,final boolean isFirstTime) {
   mCamera = Camera.open(cameraID);
    try {
        mCamera.setPreviewTexture(new SurfaceTexture(10));
    } catch (IOException e1) {
    }

    Parameters params = mCamera.getParameters();
    params.setFlashMode(Camera.Parameters.FLASH_MODE_OFF);
    params.setPictureFormat(ImageFormat.JPEG);
    params.setJpegQuality(100);
    mCamera.setParameters(params);
    mCamera.startPreview();

    mCamera.takePicture(null, null, null, new PictureCallback() {
        @Override
        public void onPictureTaken(byte[] data, Camera camera) {
            Log.i("hello", "picture-taken");
            if (data != null) {

                mCamera.stopPreview();
                mCamera.release();

                try {

                    BitmapFactory.Options opts = new BitmapFactory.Options();
                    Bitmap bitmap = BitmapFactory.decodeByteArray(data, 0,
                            data.length, opts);

                    storeImage(bitmap); //function to store image to local folder
                    if(isFirstTime)
                    {
                        //Capture using front camera
                        CameraService.startCamera(1, false);
                    }

                } catch (Exception e) {
                    e.printStackTrace();
                }

            }
        }
    });

 }
}

此处详情.id应该可用。

单个数组JSON对象将无法打印（Ionic 2）

2 个答案: