小编abd*_*hab的帖子

Angular(4,5,6,7) - 在ngIf上滑出动画的简单示例

什么是最小的和Angular4的本地方式滑入和滑出容器元素？

例如

<div ngIf="show">
    <!-- Content -->
</div>

Run Code Online (Sandbox Code Playgroud)

当show变为true时,滑入内容(从上到下,就像jQuery.slideDown()).

当show变为false时,滑出内容(适当地具有缓出效果).

typescript angular angular-animations

abd*_*hab

2018 10-29

34
推荐指数

4
解决办法

7万
查看次数

Angular - 如何在组件级别实现异常处理

在Angular(Angular 4,5)中工作时,如果组件引发Error(TypeError或null或未定义的错误等),则整个应用程序会中断.

我们如何处理这个问题,以捕获组件级别的错误并可能显示回退UI,如React16使用错误边界.

javascript reactjs angular

abd*_*hab

2018 01-22

7
推荐指数

1
解决办法

791
查看次数

如何用CSS创建实心彩虹边框？

如何使用CSS创建以下彩虹效果？

即顶部圆形边框,固体彩虹色停止(不插入HTML).

颜色是:#c4e17f. #f7fdca, #fad071, #f0766b, #db9dbe, #c49cdf, #6599e2, #61c2e4.

到目前为止我尝试了什么:

.container {
  background: #596678;
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.top-round-rainbow {
  width: 50%;
  height: 50%;
  background: white;
  border-radius: 4px;
  
  background-image: repeating-linear-gradient(to right, #c4e17f 50px, #f7fdca 50px, #fad071 50px, #f0766b, #db9dbe, #c49cdf, #6599e2, #61c2e4);
}

Run Code Online (Sandbox Code Playgroud)

<div class="container">
  <div class="top-round-rainbow">
  </div>
</div>

Run Code Online (Sandbox Code Playgroud)

css border linear-gradients css3 repeating-linear-gradient

abd*_*hab

2018 02-28

7
推荐指数

1
解决办法

3537
查看次数

OpenLayers 3如何在OpenLayer 2中将Feature Modified事件注册为"featuremodified"

我需要使用OpenLayers 3矢量编辑实现撤消/重做功能(就像http://dev.openlayers.org/examples/modify-feature.html中针对OpenLayers 2所示).

要跟踪的几何形状的变化特点,我要管理的存储堆栈将在用户交互持有的特点改变的几何定义.我知道OpenLayers 3提供了可观察对象.所以ol.Feature或者ol.Feature.getGeometry()可以观察到更改,但我正在寻找发出的显式事件ol.interaction.Modify,当交互开始或结束向量编辑操作时应该通知我(就像OpenLayers 2中的事件"beforefeaturemodified"和"featuremodified"事件一样).

侦听观察到的几何体或特征变化的处理程序可以用于此目的但是它太昂贵,因为修改后的特征的几何形状随着每个像素移动而改变.

我已经浏览了OpenLayers 3 的官方文档,但找不到OpenLayers 2提供的各种事件.在大多数情况下,文档仅提到更改事件.我想知道这些事件是否不是Openlayer 3架构的考虑因素.如果是这样,任何建议如何扩展现有ol.interaction.Modify以包含自定义事件？谢谢.

events interaction undo-redo observable openlayers-3

abd*_*hab

lucky-day

6
推荐指数

1
解决办法

3519
查看次数

AngularJS:将数组打印为字符串的简洁方法

我有一个以下数组:

"cast": [
      {
        "name": "James Stewart"
      },
      {
        "name": "Kim Novak"
      },
      {
        "name": "Barbara Bel Geddes"
      },
      {
        "name": "Tom Helmore"
      }
    ]

Run Code Online (Sandbox Code Playgroud)

AngularJS中将它格式化为什么是:

James Stewart, Kim Novak, Barbara Bel Geddes, Tom Helmore

Run Code Online (Sandbox Code Playgroud)

有没有办法使用filter或者formatter我可以在模板中巧妙地做到这样:

<font class="authors-string">{{ object.cast | filter/formatter/? }}</font>

Run Code Online (Sandbox Code Playgroud)

我认为在控制器中编写这种简单解析的逻辑会使控制器主体混乱.

谢谢你的关注.

javascript angularjs angular-filters

abd*_*hab

lucky-day

5
推荐指数

1
解决办法

3882
查看次数

Angular RxJS - 如何监控 HTTP Get 请求（非文件）的进度

如何利用 Angular HTTPClient 的progress事件来显示不一定是文件请求的 Get 请求的百分比进度？

当前 HTTPClient 的progress事件在请求完成后触发。我希望Content-Length在后端工作并确定前端加载的内容百分比。

我正在为网格加载大量行，并且需要在 UI 上显示增量进度。是否可以？

rxjs angular angular-httpclient

abd*_*hab

lucky-day

5
推荐指数

2
解决办法

1万
查看次数

Redux Toolkit：如何将使用 createAction 创建的动作作为类型引用

Redux 工具包提供了createAction辅助方法。我在引用使用createActionas 类型创建的操作时遇到问题。

例如：

const getData = createAction<PayloadAction<number>>('user/getData')

function* exampleSaga(action: ?) {
   ...
}

Run Code Online (Sandbox Code Playgroud)

我怎么能说exampleSaga那action是类型getData？

要了解我是如何尝试这样做的，请参考以下（示例）代码并查看我面临的问题的评论：

减速机.ts

import { createAction, PayloadAction } from '@reduxjs/toolkit';

export const getData = createAction<PayloadAction<number>>('user/getData');

const userSlice = createSlice({
  name: userSliceName,
  initialState,
  reducers: {
    getUser(state: IUserState): void {
      state.loading = true;
      state.error = null;
    },
    getUserSuccess(state: IUserState, action: PayloadAction<{ user: IUser }>): void {
      const { user } = action.payload;
      state.user = user;
      state.loading = …

Run Code Online (Sandbox Code Playgroud)

typescript reactjs react-redux redux-toolkit

abd*_*hab

2020 06-20

4
推荐指数

2
解决办法

3452
查看次数

jQuery-UI自动完成功能不适用于Bootstrap 4模式

我在引导程序4模式中遇到问题，我试图autocomplete在输入上使用jQuery-UI的功能，但是它不起作用，我尝试过：

.ui-front {
    z-index:1001 !important;
}

Run Code Online (Sandbox Code Playgroud)

该函数可以在没有模态的情况下正常工作，但是当我将其放在模态的表单中时，它将停止工作。

我尝试将有关此自动完成问题的所有提示都尝试进入引导模式，但没有成功。

这是代码：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Auto Complete</title>
    <link rel="stylesheet" href="css/jquery-ui.css">

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
    <style>
        .ui-autocomplete {
        }
    </style>

</head>
<body>

<div class="container">
    <button class="btn btn-success" data-target="#modalOS" data-toggle="modal">MODAL</button>
<div class="modal fade " id="modalOS">
    <div class="modal-dialog " role="document">
        <div class="modal-content">
            <div class="modal-header ">
                <h5 class="modal-title" id="exampleModalLongTitle">MODAL</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button> …

Run Code Online (Sandbox Code Playgroud)

jquery jquery-ui autocomplete bootstrap-modal bootstrap-4

Jde*_*dev

2018 02-28

3
推荐指数

1
解决办法

3903
查看次数