小编gfe*_*els的帖子

TypeScript-setInterval是什么类型

如果我想为变量分配类型,稍后将为其分配setInterval,如下所示:

this.autoSaveInterval = setInterval(function(){
      if(this.car.id){
        this.save();
      }
      else{
        this.create();
      }
    }.bind(this), 50000);
Run Code Online (Sandbox Code Playgroud)

应该为this.autosaveInterval可变类型分配什么类型?

javascript typescript typescript2.0 angular

11
推荐指数
4
解决办法
9572
查看次数

与 Typescript 反应:“历史”类型上不存在“推送”属性

我试图通过推入历史对象来远离视图。但是,当我尝试将路由推入其中时,我收到一条错误消息:

“历史”类型不存在“推送”属性。

  render(){
    return (
        <div className="loginWrapper">
    withRouter(({history}) => (<button onClick={()=>{history.push('/home')}} className="btn btn-primary">Pieteikties</button>))
  </div>
    )  
}
Run Code Online (Sandbox Code Playgroud)

我能做些什么来解决这个问题?

编辑:

我也试过这个:

logIn(){
  this.props.history.push('/new-location')
}
Run Code Online (Sandbox Code Playgroud)

使用这样的组件:

 render(){
    return (
        <div className="loginWrapper">
<button onClick={this.logIn} className="btn btn-primary">Pieteikties</button>
</div>
    )  
}
Run Code Online (Sandbox Code Playgroud)

它没有用。

javascript routing typescript reactjs react-router

10
推荐指数
2
解决办法
2万
查看次数

如何使用 Jasmine 测试多个顺序调用

我正在尝试测试一个取消订阅所有订阅的函数:

ngOnDestroy() {
        this.tryUnsubscribe(this.carsSubscription);
        this.tryUnsubscribe(this.partsSubscription);
        this.tryUnsubscribe(this.shopsSubscription);
    }
Run Code Online (Sandbox Code Playgroud)

这是我为该函数编写的测试:

it('should unsubscribe from subscriptions ', () => { 
      spyOn(component, "tryUnsubscribe");     
      component.ngOnDestroy();
      expect(component.tryUnsubscribe).toHaveBeenCalledWith(component['carsSubscription']);
      expect(component.tryUnsubscribe).toHaveBeenCalledWith(component['partsSubscription']);
      expect(component.tryUnsubscribe).toHaveBeenCalledWith(component['shopsSubscription']);
    });
Run Code Online (Sandbox Code Playgroud)

问题:

如果我注释掉一个函数调用,测试仍然通过。

ngOnDestroy() {
        this.tryUnsubscribe(this.carsSubscription);
        //this.tryUnsubscribe(this.partsSubscription);
        this.tryUnsubscribe(this.shopsSubscription);
    }
Run Code Online (Sandbox Code Playgroud)

只有当我注释掉所有这些函数调用时,测试才会失败:

ngOnDestroy() {
        //this.tryUnsubscribe(this.carsSubscription);
        //this.tryUnsubscribe(this.partsSubscription);
        //this.tryUnsubscribe(this.shopsSubscription);
    }
Run Code Online (Sandbox Code Playgroud)

如何正确测试这种功能?我究竟做错了什么?

jasmine rxjs angular

9
推荐指数
2
解决办法
8868
查看次数

与 TypeScript 反应:类型“{}”不可分配给类型

我在 React 中有一个组件,它显示基于 prop 的导航。当我尝试运行应用程序时,我无法弄清楚为什么会出现此错误:

(19,8): Type '{}' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<TableSystems> & Readonly<{ children?: ReactNode; }...'.
  Type '{}' is not assignable to type 'Readonly<{ todos: any; showNav: boolean; }>'.
    Property 'todos' is missing in type '{}'.
Run Code Online (Sandbox Code Playgroud)

我的组件看起来像这样:

import * as React from 'react'
import Navigation from '../components/Navigation'
import TableSystems from '../components/TableSystems'

class SystemTable extends React.PureComponent<{showNav: boolean }> {
  render(){
  return (

    <div >
    <div >
    <div className="navigationContainer">
    <Navigation {...this.props.showNav} className="sideMenu"/>
      <TableSystems/>
      </div>
    </div>
  </div>)
  } …
Run Code Online (Sandbox Code Playgroud)

typescript reactjs

7
推荐指数
1
解决办法
2万
查看次数

如何运行 create-react-app 构建版本

我创建了一个测试 React 应用程序,并使用create-react-app启动它。我使用yarn start启动它,但这会启动应用程序的调试版本。我做了npm run build并创建了 build 文件夹,但是当我从/build文件夹执行yarn start时,它仍然启动应用程序的调试版本。我需要这个来测试优化版本的性能。我该如何解决这个问题?

npm reactjs create-react-app yarnpkg

5
推荐指数
3
解决办法
6505
查看次数

网格布局 - 固定列宽和响应式网格间隙

我有一个填充整个水平空间的布局,并且由于网格布局,最后一行中的项目仍然与其他行具有相同的宽度。

现在,当调整屏幕大小时,项目的宽度会发生变化,以便填充整行。是否可以将项目的宽度固定并调整网格间隙?

https://jsfiddle.net/c60ymrfu/

当前CSS:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-auto-rows: 20px;
  grid-gap: 5px;
}
Run Code Online (Sandbox Code Playgroud)

当前行为: 在此输入图像描述

期望的行为: 在此输入图像描述

html css css-grid

5
推荐指数
1
解决办法
2万
查看次数

React 函数式组件、setState 和不变性

感觉有点愚蠢,我已经使用 React 两年了,并且一直认为你必须使用setState对象的新副本来避免状态发生变化。然而,这个例子改变了状态并使用setState相同的对象引用,没有任何问题。

为什么这有效?

工作代码笔

const { useState } = React;

const Counter = () => {
  const [countObject, setCountObject] = useState({count: 0});

  const onClick = () => {
    countObject.count = countObject.count + 1;
    setCountObject(countObject); // mutated object, same reference
    
  }
  
  return (
    <div>
      <p>You clicked {countObject.count} times</p>
      <button onClick={onClick}>
        Click me
      </button>
    </div>
  )
}

ReactDOM.render(<Counter />, document.getElementById('app'))
Run Code Online (Sandbox Code Playgroud)

javascript reactjs react-hooks

5
推荐指数
1
解决办法
682
查看次数

离子,角度-ChangeDetectorRef未定义

我像这样导入ChangeDetectorRef:

import { Component, ViewChild, ChangeDetectorRef , ElementRef } from '@angular/core';
Run Code Online (Sandbox Code Playgroud)

并在我的页面的构造函数中初始化更改检测器,如下所示:

constructor(
    ...
    private ref: ChangeDetectorRef
  )
Run Code Online (Sandbox Code Playgroud)

但是,当我在回调函数中执行detectChanges()时:

 hardResetCallback(car:Car){
    this.car=car;
    this.ref.detectChanges();
  }
Run Code Online (Sandbox Code Playgroud)

它说“无法读取未定义的属性'detectChanges'”。我可能会缺少什么?

编辑:

回调是从模式调用的。模态通过导航参数获取回调-在我称之为的父组件中:

const resetModal : Modal = this.modal.create('CarConfigurationResetPage', { car: this.car, callback: this.hardResetCallback });
    resetModal.present();
Run Code Online (Sandbox Code Playgroud)

然后这就是我在模态中得到它的方式:

 this.callback=this.navParams.get('callback');
Run Code Online (Sandbox Code Playgroud)

我像这样在AJAX调用的成功方法中从模式调用回调:

this.callback(response);
Run Code Online (Sandbox Code Playgroud)

ionic-framework ionic2 ionic3 angular

4
推荐指数
1
解决办法
1747
查看次数

将stackblitz Angular版本更新到最新版本

我更新了这个stackblitz https://stackblitz.com/edit/template-driven-form-demo-bnezpz?file=app/user-form/user-form.component.ts

通过单击“依赖关系”选项卡中的“刷新”按钮,可以将其更新为最新的角度版本。

结果是它一直要求我安装core-js,但无论我按安装多少次都无所谓,它只是不断弹出并要求我安装core-js。怎么了

javascript typescript angular stackblitz

4
推荐指数
1
解决办法
372
查看次数

离子标签点击不起作用

有时我不明白为什么 Ionic 如此不灵活。我有一个输入和一个标签堆叠在一起:

<ion-item>
<ion-label stacked (click)="labelClick($event)" [innerHTML]="htmlString"></ion-label>
<ion-input  ></ion-input>
Run Code Online (Sandbox Code Playgroud)

labelClick()无论如何,该功能都不会触发。

有什么我可以做的,以便单击 LABEL 触发该功能?不改变外观/使用的组件。

这是一个带有此代码的堆栈闪电战,证明它不起作用:https ://stackblitz.com/edit/ionic-5yreac?file=pages%2Fhome%2Fhome.html

ionic-framework ionic3 angular

3
推荐指数
1
解决办法
8803
查看次数