Nativescript Angular绑定图像查看不起作用答案

【问题标题】：Nativescript Angular binding Image to view not workingNativescript Angular绑定图像查看不起作用
【发布时间】：2017-05-23 00:15:31
【问题描述】：

我正在尝试用相机拍照或从图库中选择一张，然后将其显示在我的视图中（就这么简单）。但是我在 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 触发更改检测，但没有成功。

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

谢谢

【问题讨论】：

你用什么库来拍照？从中的API可以澄清问题所在。另一件事是this.avatar 的值是什么，它必须是文件的真实路径而不是数据。
@PRAISER 我正在使用 nativescript-camera。即使我设置了this.avatar = path-to-a-static-image-no-my-server，它也不会出现在视图中。事实上，我在“takePicture”回调中所做的任何事情都不会更新视图。
我的建议：首先确保nativescript-camera 脱离Angular 的上下文。

标签： angular nativescript

【解决方案1】：

我终于让它工作了！实际上我犯了一个错误，将静态数组传递给列表视图。因此，仅当作为“项目”传递给列表视图的数组发生更改时，角度似乎才更新模板。 ngZone.run 也需要让它工作。

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

【讨论】：

嗨罗兰，我想我也有同样的问题，但你的解决方案相当不够。你能澄清一下什么对你有用吗？
@nbo 你能告诉我你的代码吗？在 zone.run() 中运行你的处理程序代码。应该没问题。但如果这不起作用，您可能还会遇到一些模板问题。
感谢您的回复。事实证明我的问题不相关 - 我使用的是标记（未更新），而我应该使用通用的标记。