Question

我试图用相机拍照或从图库中选择一张照片，然后在我的视图中显示（就像那样简单）。但是我在camera.takePicture回调中设置新值后，化身没有更新，如下图所示。

// template
<Image col="0" [src]="avatar" class="thumb img-rounded" width="45" height="45" verticalAlignment="middle"></Image>


// component
camera.requestPermissions();
let options = {
       width: this.width,
       height: this.height,
       keepAspectRatio: this.keepAspectRatio,
       saveToGallery: this.saveToGallery,
       format: 'png'
  };

camera.takePicture(options)
.then(imageAsset => {
  this.avatar = imageAsset // update view with new image
  this.uploadImage()  // upload on the server
}).catch(err => {
  console.log('error---', err.message);
});

Angular似乎没有检测到这些变化。我试图在我的视图中显示的相同图像，使用nativescript-background-http成功上传到我的服务器。

这是我的环境：

 "tns-ios": "version": "3.0.0"
"tns-android": "version": "3.0.0"
"@angular/core": "4.0.0",
"tns-core-modules": "~3.0.0"
"nativescript-camera": "^3.0.0"

IOS和Android上发生的问题。

我尝试使用ApplicationRef，NgZone和ChangeDetectorRef触发更改检测，但没有成功。

是否有任何有关如何使用相机模块拍照并将图像绑定到视图的工作示例？

由于

Answer 1

我终于有了它的工作！实际上我通过将静态数组传递给listview而犯了一个错误。因此，只有当数组作为“项目”更改传递给listview时，angular似乎才更新模板。还需要ngZone.run来使它工作。

 <ListView   class="list-group"   [items]="[1, 2]">
   <template> 
  // Image code
  </template>
</ListView>

Nativescript Angular绑定图片查看无法正常工作

1 个答案: