小编seb*_*bap的帖子

我在ngFor中有一个组件'bar'.我想用动画从前一个值开始更新它的宽度到新的宽度.

HTML:

<div *ngFor="let station of stations" class="station">
    <bar [perc]="station.perc" class="bar"></bar>
</div>

ParentComponent:

ngOnInit(){
    setInterval(() => this.updateData(), 10000);
  }

  updateData(){
    const url = 'http://....';
    this.http.get(url)
      .map(res => res.json())
      .subscribe(data => {

        this.stations = data;

      });
  }

BarComponent

export class BarComponent {

  @Input() perc;

  constructor(private element: ElementRef){}

  ngOnChanges(changes: any): void {
    let perc = changes.perc.currentValue;
    TweenMax.to(this.element.nativeElement, 1, { width: perc + '%' });
  }

}

但是在每个updateData()上,它看起来像ngFor重新创建dom并再次构造BarComponent.因此,即使'station.perc'相同,也会触发ngOnChanges().

并且转换从0开始重新开始,而不是从之前的值开始...

我可能在这里错过了一个关键点但是干净的解决方法是什么？

我使用量角器测试Angular2应用程序.它工作正常,我认为我没有改变任何东西,但现在它最终得到这个:

...

super(opt_error);
    ^
SessionNotCreatedError: session not created exception
from unknown error: Runtime.executionContextCreated has invalid 'context': {"auxData":{"frameId":"4012.1","isDefault":true},"id":1,"name":"","origin":"://"}
  (Session info: chrome=54.0.2840.71)
  (Driver info: chromedriver=2.21.371459

...

我在Mac OSX 10.11.4,Chrome 54.0.2840.71上工作.

有什么建议吗？谢谢

---编辑26/10

因为它取决于每个设置,所以看起来并不是绝对的答案.主要思想是相应地更新量角器/ chromedriver/webdriver-manager.

说我现在面临另一个问题:我做的每一个基本测试,包括(例如)一个browser.get()失败:

Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL

我不知道它是否是一个孤立的案例,如果它适合这里(我使用jasmine2作为框架)所以我在这里开始另一个问题

在 jest.config.js 中：

setupFiles: ['<rootDir>/jest.init.js'],

在 jest.init.js 中：

jest.mock('xxx/layout', () => ({
  ...
  isMobile: false,
  ...
}))

因此，在从 'xxx/layout' 导入 isMobile 的所有测试中，isMobile 将为 false

现在我尝试在一些测试中覆盖 isMobile，如下所示：

jest.mock('xxx/layout', () => ({ isMobile: true }))

isMobile.mockImplementation(() => true)

但这不起作用！

这样做的好方法是什么？

这是我使用 webpack 在 typescript/angular2 应用程序中导入 lodash 的方法：

• $ npm install lodash --save
• $typings install dt~lodash --save

在 webpack.config.js 中：

module.exports = {
   plugins: [  
      new ProvidePlugin({
         '_' : 'lodash'

它有效。

但是我的编辑器 (Sublime) 和运行时终端中仍然存在错误：找不到名称“_”

那么，我缺少什么？

在我使用 lodash 的 .ts 文件中，我尝试像这样声明它：

declare var _ : LoDashStatic

没有运气。

我希望滑块根据活动滑块高度调整其大小.

有一个选项autoHeight:true但它不起作用

options:
{
 autoHeight:true
}

仅当ion-content scroll设置为false时,它才有效

例如,使用以下html:

<div class='parent'>
  <p>
    <span class='child'></span>
  </p>
</div>

从.child找到.parent我正在尝试这样的事情:

let child = element(by.css('.child'));
let parent = child.element(by.xpath('../..')); // not working
let parent = child.element(by.xpath('ancestor::.parent')); // not working

实现这一目标的最佳方法是什么？

我找不到测试表单 yup 验证的方法：

it('displays error on submit if name is empty', async () => {
    const wrapper = mount(<MyFormik/>)
    const getForm = () => wrapper.find('form')

    wrapper.find('input[name="name"]').simulate('change', {
      persist: () => {},
      target: {
        name: 'name',
        value: ''
      }
    })

    wrapper
      .find('MyInnerForm')
      .props()
      .submitForm()


    await wait(0) // await next tick or even 1s...
    wrapper.update()

    expect(
      wrapper
      .update()
      .find('.error')
      .exists()
    )
    .toBeTruthy() // FALSE!
  })

无论我是否在提交后等待，更新包装器错误道具始终为空。

这里的解决方案对我不起作用：

https://github.com/jaredpalmer/formik/issues/1146

https://github.com/jaredpalmer/formik/issues/110

看起来包装器不会更新

这是提交后 formik props 的日志：

{ errors: {},
         label: '',
         name: 'name',
         type: …

因为当我这样做时，什么也没有呈现。最终的想法是为整个应用程序提供通用的背景图像。我试图将Navigator包装在Image中，结果相同。

<View style={styles.container}>
  <Image source={pic} style={styles.backgroundImage}></Image>
  <Navigator
    configureScene={this.configureScene}
    style={styles.app}
    initialRoute={{ component: Main }}
    renderScene={this.renderScene}
  />
</View>

since I changed breakpoints values to the theme:

breakpoints: {
      values: {
        xs: 0,
        sm: 568,
        md: 760,
        lg: 960,
        xl: 1200,
      }, 

i'd like to add an xxl:1400 breakpoint to use like so:

<Grid item xxl="4" md="6" xs="12"> 

Is it possible?

我希望每个分支有一个管道

我将一个放在分支开发上，另一个放在分支主控上，但它们没有被考虑在内。

换句话说，可以说我有这样的查询：

return Location::valid()
    ->with('owners', 'gardeners')
    ->withCount('gardeners')
    ->get();

返回一些json：

[
 {
   name: 'LocationA',
   nb_gardeners_max: 3,
   owners: [...],
   garderners: [...],
   garderners_count: 2
 }
]

在json响应中，我想添加一些自定义条目，例如is_full和available_places：

[
 {
   name: 'LocationA',
   nb_gardeners_max: 3,
   owners: [...],
   garderners: [...],
   garderners_count: 2,
   ...
   is_full: false,
   available_places: 1
 }
]

我想这与原始/联接/聚合...有关，但我真的不知道该怎么做。任何帮助将不胜感激

编辑

Minhajul的答案确实很有用，但不可能对附加属性执行WHERE子句。

Location::where('is_full',true)->get() // NOT WORKING

尽管仍然可以对它执行filter（），但我想为此使用JOIN来执行单个查询