小编Opt*_*tte的帖子

我有一个组件接收一个image对象数组作为Input数据.

export class ImageGalleryComponent {
  @Input() images: Image[];
  selectedImage: Image;
}

我想在组件加载时将selectedImage值设置为images数组的第一个对象.我试图在OnInit生命周期钩子中这样做:

export class ImageGalleryComponent implements OnInit {
  @Input() images: Image[];
  selectedImage: Image;
  ngOnInit() {
    this.selectedImage = this.images[0];
  }
}

这给了我一个错误Cannot read property '0' of undefined,这意味着images在这个阶段没有设置值.我也尝试了OnChanges钩子,但我卡住了,因为我无法获得有关如何观察阵列变化的信息.我怎样才能达到预期的效果？

父组件如下所示:

@Component({
  selector: 'profile-detail',
  templateUrl: '...',
  styleUrls: [...],
  directives: [ImageGalleryComponent]
})

export class ProfileDetailComponent implements OnInit {
  profile: Profile;
  errorMessage: string;
  images: Image[];
  constructor(private profileService: ProfileService, private   routeParams: …

我试图动态地为iron-ajax模板分配属性,但它解析为未定义.

<dom-module id="products-service">
  <style>
    :host {
      display: none;
    }
  </style>

  <template>
    <iron-ajax id="productsajax"
      auto
      url="http://localhost:3003/api/taxons/products"
      params='{"token":"my-token"}'
      method='GET'
      on-response='productsLoaded'
      handleAs='json'>
    </iron-ajax>
  </template>
</dom-module>

<script>
(function() {
    Polymer({
        is: 'products-service',

        properties: {
            categoryid: {
                type: String,
                notify: true,
                reflectToAttribute: true
            }
        },

        //here I am trying to add and `id` to the `iron-ajax` `params` attribute.
        ready: function() {
            this.$.productsajax.params.id = this.categoryid;
       }
    });
})();
</script>

生成的url如下所示:

`http://localhost:3003/api/taxons/products?token=my-token&id=undefined`

该dom-module的categoryid属性不是undefined我可以看到反映在属性正确的属性值,这意味着它是与如何我把它分配给属性.我也尝试了这个created和attached回调,但仍然无法正常工作.

编辑:categoryid …

我正在尝试将src图像的属性绑定到如下所示的ngFor指令中：

<div *ngFor="imageId of imageIds">
  <img [attr.src]="imageSrc(imageId)" alt="{{imageId}}">
</div>

imageSrc组件内部的方法如下所示：

imageSrc(imageId: string){
  var hostUrl = "http://192.168.0.101:3000/";
  var imageUrl = hostUrl+"images/"+imageId;
  var imgSrc = "";

  this._imageService.getImage(imageId)
  .subscribe(image => {
    imgSrc = hostUrl + image.url
   });
  return imgSrc;
}

中的getImage函数Injectable ImageService如下所示：

getImage(id: string) {
  var _imageUrl = "http://192.168.0.101:3000/images/"+id;
  return this.http.get(_imageUrl)
  .map(res => <Image>res.json().data)
  .catch(this.handleError)
}

问题是，只有两个imageIds的*ngFor指令呈现两个列表项为预期（但没有图像显示），但在调用数据服务不会停止，它得到了什么似乎是一个无限循环结束，两个图像直到应用程序崩溃。我做错了什么？

我将此请求发送到服务:

get_store_data = Typhoeus::Request.new("http://localhost:3000/api/v1/store?service=#{(proxy_ticket.service)}&ticket=#{proxy_ticket.ticket}")

proxy_ticket.service解析为此字符串"http://localhost:3000/api/v1/store".发送请求时,此字符串将转义为:

service=http%3A%2F%2Flocalhost%3A3000%2Fapi%2Fv1%2Fstore

问题是另一端的服务需要服务参数,"http://localhost:3000/api/v1/store"如何防止此查询字符串被转义？

我有一个名为的模型Movie,如下所示:

class Movie < ActiveRecord::Base
  include Elasticsearch::Model
  include Elasticsearch::Model::Callbacks

  has_many :actors, after_add: [ lambda {|a,c| a.__elasticsearch__.index_document}],
                    after_remove: [ lambda {|a,c| a.__elasticsearch__.index_document}]

  settings index: {number_of_shards: 1} do
    mappings dynamic: 'false' do
      indexes :title, analyzer: 'snowball', boost: 100
      indexes :actors
    end
  end

   def as_indexed_json(options={})
    self.as_json(
      include: {
          actors: { only: :name}
      }
    )
  end
end

当我这样做时Movie.first.as_indexed_json,我得到:

{"id"=>6, "title"=>"Back to the Future ", 
"created_at"=>Wed, 03 Dec 2014 22:21:24 UTC +00:00, 
"updated_at"=>Fri, 12 Dec 2014 23:40:03 UTC +00:00, 
"actors"=>[{"name"=>"Michael J …

我正在尝试在iron-ajax请求正在进行但未成功时显示文件进度.下面是一个自定义的元素的代码get-products-service,其承载iron-ajax请求和products-list它承载paper-progress.

这是整体products-list dom-module:

<dom-module id="product-list">
  <style>
    :host {
      display: block;
      width: 100%;
      text-align: center;
    }
    product-card {
      margin-left: 10px;
      margin-bottom: 30px;
    }
</style>
<template>
  <template is="dom-if" if="{{loading}}">
    <paper-progress value="10" indeterminate="true"  style="width:100%;"></paper-progress>
  </template>
  <paper-button id="previous" on-tap='previousPage'>Previous</paper-button>
  <paper-button id="next" on-tap='nextPage'>Next</paper-button>

  <get-products-service products="{{products}}" id="productservice"   page="{{page}}" loading="{{loading}}"></get-products-service>
 <div>
    <template is="dom-repeat" items="{{products}}">
     <product-card on-cart-tap="handleCart" product="{{item}}">
       <img width="100" height="100">
       <h3>{{item.name}}</h3>
       <h4>{{item.display_price}}</h4>
     </product-card>
    </template>
  </div>
</template>
</dom-module>
<script>
  (function() {
  Polymer({
  is: 'product-list',

  properties: { …

我正在尝试从字符串数组创建面包屑。我有一个名为的数组属性taxonomy，它看起来像["categories", "clothing", "men", "suits"]。dom-repeat像这样使用：

<template is="dom-repeat" items="{{taxonomy}}" id="breadcrumbs">
  <span>{{item}}</span><span hidden$="[[computeSpanHidden]]"> > </span>
</template>

结果视图如下所示：

类别>服装>男士>西装>

我想要的是删除最后一个>，以获得类似这样的内容：

类别>服装>男士>西装

我尝试通过绑定到要隐藏的范围的hidden属性来执行此操作，但是我被卡住了。不完整的computeSpanHidden函数如下所示：

computeSpanHidden: function(){
  if(this.taxonomy.slice(-1)[0] == /**the value i want to know how to get **/)
    { return true; } 
      else 
        { return false; }
}

我有这个组件:

export class CategoryDetailComponent implements OnInit{
  category: Category;
  categoryProducts: Product[];
  errorMessage: string;
  constructor(private _categoryService: CategoryService, private _productService: ProductService, private _routeParams: RouteParams ) {}

  ngOnInit() {
    this.getCategoryAndProducts();
  }
  getCategoryAndProducts() {
    let categoryName = this._routeParams.get('name');
    let categoryId = this.routeParams.get('id');
    var params = new URLSearchParams();
    params.set('category', categoryName);

    Observable.forkJoin(
      this._categoryService.getCategory(categoryId),
      this._productService.searchProducts(params)
    ).subscribe(
      data => {
      //this displays the expected category's name.
      console.log("category's name: "+ data[0].attributes.name)
      this.category = data[0];
      this.categoryProducts = data[1];
      }, error => this.errorMessage = <any>error
    )
  }
}

在组件的模板中,我有:

<h1>{{category.attributes.name}}</h1>

当我导航到这个组件时,我收到一个错误:

TypeError: …

我正在尝试使用SpreeCommerce API搜索产品taxon_ids作为过滤器.搜索api使用ransack gem 谓词进行搜索.我试过了:

/api/products?q[taxon_ids_cont]=x

(其中x是分类单元的id).我也尝试过:

/api/products?q[taxon_ids_in]=x

并且都返回所有产品的json而不进行过滤.我应该在products端点上使用哪些参数来获取过滤的产品,taxon_ids或者我可以如何解决此问题？

我有这个组件:

export class FileFormComponent {
  _base64: string;

 handleFile($event){
   var input = $event.target;
   var reader = new FileReader();
   reader.onloadend = function() {
     this._base64 = reader.result
   }
   reader.readAsDataURL(input.files[0]);
   console.log(this._base64);
 }
}

问题是console.log(this._base64)日志undefined.看来this里面的onloadend事件并不是指组件的上下文.如何_base64从FileReader onloadend事件内部设置属性的值.

我正在尝试将表单输入中的参数添加到link_to以.js.erb. （为清楚起见，我不是要提交表单。）表单如下所示：

form_tag players_path, method: 'get', id: 'my_form' do%>
  <%= number_field_tag :min_age, params[:min_age], id: 'min_age' %>
  <%= number_field_tag :max_age, params[:max_age], id: 'max_age' %>
  <%= submit_tag  'go'%>
<% end %>

该link_to如下所示：

<%= link_to '70 lbs & Under', players_path(:min_weight => 0, :max_weight => 70), id: 'my_link',  remote: true %>

我想要做的是将 的值添加#my_form为#my_link. 为此，我正在使用 jQuery：

$(document).ready(function(){
   $('#my_link').click (function(){
    var parameterValues = $('#my_form').serialize();
    $.ajax({
        type:'GET',
        url: $(this).attr('href'),
        data: parameterValues,
        dataType:"script"
    });
    return false;

});
}); …

我使用的有一些聚合物入门套件paper-icon-buttons上的paper-toolbar默认.

<body unresolved class="fullbleed layout vertical">
  <template is="dom-bind" id="app">
  <paper-drawer-panel id="paperDrawerPanel" forceNarrow>
   <paper-header-panel main mode="flex">
    <!-- Main Toolbar -->
    <paper-toolbar id="mainToolbar">

      <!-- Toolbar icons -->
        <paper-icon-button icon="search"></paper-icon-button>
        <paper-icon-button icon="refresh" on-tap='refreshTapped'></paper-icon-button>

      </paper-toolbar>

    </paper-header-panel>
  </paper-drawer-panel>
</template>

<script src="scripts/app.js"></script>

如何on-tap在刷新按钮上添加监听器？我试图添加scripts/app.js如下所示的侦听器方法,但仍无法找到该方法.

function refreshTapped(){ 
  document.querySelector('#myDialog').toggle();
}

当我点击按钮时,我在浏览器控制台上看到了这个:

`[dom-bind::_createEventHandler]: listener method `refreshTapped` not defined`