小编dan*_*rme的帖子

我试图在我的Angular应用程序中混合使用Polymer Web组件,但是我无法在这些框架之间获得双向数据绑定.我已经看过这个视频并且已经尝试过这个问题中提供的解决方案,但它仍然不适用于我.这些是我的尝试:

• Object 属性值

  <game-card game="{{game}}" bind-polymer></game-card>- 基于post-card.htmlPolymer教程.game是一个id,title等对象

  我在gameChangedWeb组件上创建了该函数,并在game变量中添加了一个新属性this.game.foo = 'bar';,如果我这样做的话

  <pre><code>{{game | json}}</code></pre>

  在组件之后,"foo": "bar"字符串化对象中没有.即使

  publish: { game: {reflect: true} },

  它不起作用.

• 框架组件

  <core-input value="{{cool}}" bind-polymer></core-input> <paper-input value="{{cool}}" bind-polymer></paper-input>

  它只有当我编辑的作品元素的源代码来reflect的value属性(上core-input.html,纸张输入了扩展).我认为这不是解决这个问题的好方法.

我错过了什么吗？有没有一个很好的资源我可以寻找这个Angular-Polymer集成？在Google上搜索会带来更多关于材料的结果,而不是图书馆本身,一旦发现,大多数都是"Polymer for Dart"资源.

我需要用两个元素制作面板标题。第一个获得大部分空间，而第二个仅获得他需要的空间。

结构如下：

.flex-child> display: flex
    .child-1 > flex-grow: 1
    .child-2 > align-self: center

出于样式原因，第一个元素的文本带有white-space: nowrap, 以在大于父元素时显示省略号。但是父display: flex元素并没有将元素限制在其可用空间内。

下面的代码片段显示了当1)第一个元素有很多文本时元素的情况；2）第一个元素有合理数量的文字；和3)我希望元素如何出现，但我只能使用一个幻数作为max-width. 使用相同代码的小提琴：https : //jsfiddle.net/mjtf4ec3/1/。

.flex-child> display: flex
    .child-1 > flex-grow: 1
    .child-2 > align-self: center

.fixed-width-parent {
  margin: 1em 2em;
  width: 300px;
  background: #dedede;
  padding: 15px;
}

.unbreakable-text {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flex-child {
  display: flex;
}

.child-1 {
  flex-grow: 1; …