小编Ste*_*eve的帖子

带有ng-include的Angular JS ng-switch?

我有3个不同的代码片段,我想根据选择菜单中的选择进行交换.

它是有效的,如果我包含内联代码,但当我尝试使用ng-includes这样的时候,我得到一个Angular错误并且应用程序失败:

      <div ng-switch on="pFilter">
      <div ng-include="'includes/parcel_details_incoming.html'" ng-switch-when="Incoming Parcels"></div>
      <div ng-include="'includes/parcel_details_forward.html'" ng-switch-when="Exception Parcels"></div>
      <div ng-include="'includes/parcel_details_exception.html'" ng-switch-default></div>
      </div>
Run Code Online (Sandbox Code Playgroud)

我在这做错了什么?ng-switch不适用于ng-includes吗?

javascript angularjs angularjs-directive

6
推荐指数
1
解决办法
3108
查看次数

JavaScript映射然后过滤唯一的数组项

我知道如何分别做这两个事情,但是我确信必须有一种将它们组合在一起的方法。

我有一组类别,这些类别是从一组对象中提取的:

 this.videoCategories = this.videos.map(v => v.category);
Run Code Online (Sandbox Code Playgroud)

但是,当然,此数组中有重复项。所以现在我做了

this.uniqueVideoCategories = this.videoCategories.filter((item, index) => {
  return this.videoCategories.indexOf(item) === index;
});
Run Code Online (Sandbox Code Playgroud)

效果很好,我得到了一系列没有重复的类别。但是我试图通过将它们串在一起来学习和弄清代码,但这不起作用-产生空数组

  constructor(private videoService: VideoService) {
    this.videos = videoService.getVideos();
    this.videoCategories = this.videos
      .map(v => v.category)
      .filter((item, index) => {
        return this.videoCategories.indexOf(item) === index;
      });
    console.log(this.videoCategories);
  }
Run Code Online (Sandbox Code Playgroud)

javascript arrays es6-map

6
推荐指数
2
解决办法
69
查看次数

在 Javascript 中将小数金额转换为文本字符串分数?

我有一个以数字形式返回的值,可以是十进制数,例如“1.15”。

但是,我需要将一定范围内的所有数字格式化为给定的分数。例如,所有大于 0 但小于 0.2 的数字我想返回“1/8”。

我已经开始将其作为一系列 if/else 语句来执行此操作,但我想知道是否有更聪明、更简洁的方法。

if (amt > 0 && amt <= .2){
    q = '1/8';
} else if (amt > .2 && amt <= .3){
    q = '1/4';
}  else if (amt > .3 && amt <= .4){
    q = '1/3';
}  else if (amt > .4 && amt <= .5){
    q = '1/2';
} else if (amt > .5 && amt <= .7){
    q = '2/3';
} else if (amt > .7 …
Run Code Online (Sandbox Code Playgroud)

javascript fractions

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

在Bootstrap表单上甚至触及表单之前,AngularJS ng-messages显示错误

<div class="form-group" ng-class="{'has-error': claimForm.consigneeID.$invalid && claimForm.consigneeID.$touched}">
<label class="label-bold">Consignee ID</label><br>
<input name="consigneeID" ng-model="coId" type="number" ng-maxlength="5" ng-minlength="5" class="form-control input-sm" required>
<div class="help-block" ng-messages="claimForm.consigneeID.$error" role="alert">
  <div ng-message="required">Field is required.</div>
  <div ng-message="minlength">Too few digits.</div>
  <div ng-message="maxlength">Over 5 digits.</div>         
</div>
Run Code Online (Sandbox Code Playgroud)

minlength和maxlength错误显示正确的消息并正确设置"has-error"ng-class.但是,如果我将"required"添加到我的字段和相应的消息中,则在重新加载时,"Field is required"始终显示(直到填写).

但是,除非跳过不同的错误,否则不会出现红色的"有错误"类.

我在这里想念的是什么?

javascript twitter-bootstrap angularjs angularjs-ng-form ng-messages

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

折叠Flexbox之谜

我有一个由3个块级兄弟组成的网站:标题,div site-content和页脚.

我将我的body标签设置为flexbox,如下所示:

display: flex;
flex-direction: column;
height: 100%;
Run Code Online (Sandbox Code Playgroud)

中心site-contentdiv是flex-grow: 1.

这工作正常,并给我这个布局(虚线框是模拟屏幕的可见区域上显示的内容.页面滚动它应该).

在此输入图像描述

我的问题出现了,因为我想site-content在某些页面上的div 中添加一个垂直/水平居中的框.所以,我div为这个框创建一个并设置 site content为:

  .site-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
Run Code Online (Sandbox Code Playgroud)

然后site-contentdiv立即崩溃到这个:

在此输入图像描述

页脚骑起来而不是停留在底部.有没有搞错?

令人沮丧的是,简单的编码器重建工作正常......所以我无法隔离这个问题的原因.

html css css3 flexbox

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

Angular:无法识别来自共享模块的组件

到目前为止,我有一个包含 2 个模块的应用程序:“共享”和“网络”。

我在网络中的所有组件都运行良好。我刚刚在 Shared 模块中创建了一个简单的组件,因为我计划在整个应用程序中重复使用它:

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'pb-ds-pluginstable',
  templateUrl: './pluginstable.component.html',
  styleUrls: ['./pluginstable.component.scss']
})
export class PluginstableComponent implements OnInit {

  @Input() name: string;
  @Input() version: string;
  @Input() link: string;

  constructor() {}
  ngOnInit() {}

}
Run Code Online (Sandbox Code Playgroud)

这被导入共享模块,并导出:

...other imports...
import { PluginstableComponent } from './pluginstable/pluginstable.component';

@NgModule({
imports: [
  CommonModule,
  RouterModule,
  NgbModule
],
  declarations: [HeaderComponent, FooterComponent, HeaderShadowDirective, PluginstableComponent],
  exports: [HeaderComponent, FooterComponent, HeaderShadowDirective, PluginstableComponent]
})
export class SharedModule { }
Run Code Online (Sandbox Code Playgroud)

但是当我在 Web 模块的组件模板中使用它时,如下所示:

<pb-ds-pluginstable name="foo" version="2.2.2" …
Run Code Online (Sandbox Code Playgroud)

javascript angular

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

具有多个路由器出口的 Angular 7 路由器动画

我正在尝试按照这篇文章和几篇类似的文章在路线之间添加转换。

我确实可以让它工作,但我在使用 CSS 绝对位置时遇到问题,这似乎需要:

router-outlet ~ * {
 position: absolute;
 width: 100%;
 height: 100%;
}
Run Code Online (Sandbox Code Playgroud)

我的应用程序有多个路由出口:页眉、主页脚和页脚。我在应用程序根目录上使用 Flexbox 来使页眉和页脚粘在顶部和底部。

您可以在此stackblitz中看到布局和转换的工作原理。

问题在于,将位置设置为绝对和 100% 会导致内容进入页脚(请参阅“关于”页面)。

有没有办法在没有位置:绝对的情况下进行交叉淡入淡出过渡?这似乎假设内容占据整个页面。正如您所看到的,很多时候还有其他内容,例如页脚或其他静态内容或第二个路由器出口。

我正在寻找的是一种仅影响给定路由器插座中内容的过渡。

css angular-transitions angular angular-router

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

Angular - 自动向具有给定类的所有元素添加指令

是否可以以编程方式将指令添加到具有给定类名的组件中的所有元素,可能使用

document.getElementsByClassName("btn")

我想将matRipple指令添加到使用该类的所有元素btn,而不需要我们的团队手动将指令添加到每个元素。

或者我是否缺少另一种方法将 Angular Material 指令应用于给定类或标签名称的元素(例如button

请注意,这适用于我们不想将它们全部切换到mat-buttons 的旧版应用程序。该指令工作正常,但我正在寻找一种让我们的开发人员更轻松的方法。

angular-directive angular-material angular

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

React:仅将主体类添加到 useEffect 钩子中的某些组件?

我正在使用 React 16.8.6 和钩子。我是钩子的新手。

我在需要添加主体类的路由中加载了一个组件。当用户离开此页面时,我需要删除该类。我在用

  useEffect(() => {
    document.body.className = 'signin';
  }, []);
Run Code Online (Sandbox Code Playgroud)

这正确地将类添加到 body 标签。除非我导航到另一个页面,否则课程仍然存在。如果我重新加载第二页,它就消失了。

当路由更改时组件卸载时如何删除类?

reactjs react-router-dom react-hooks

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

WSL2 上的 NVM:无法安装 Node,未找到版本

我从 Microsoft Store 将 WSL 安装到 Windows 10 上。我能够使用https://github.com/nvm-sh/nvm上记录的curl 命令成功地将 NVM 安装到此上

NVM 安装后,我可以运行命令并检查版本。

但是,当我尝试安装节点时,要么是特定版本,nvm install 12.18.1要么nvm installnvm install --lts我收到一条消息,指出找不到该版本

me:~$ nvm install 12.18.1
Version '12.18.1' not found - try `nvm ls-remote` to browse available versions.
Run Code Online (Sandbox Code Playgroud)

或者

me:~$ nvm install --lts
Installing latest LTS version.
Version '' (with LTS filter) not found - try `nvm ls-remote --lts` to browse available versions.
Run Code Online (Sandbox Code Playgroud)

如果我尝试跑步nvm ls-remote,几秒钟后我就会得到N/A

我之前曾在 MacOS 和另一个非工作 Windows 10 机器上安装过此软件,但之前从未见过此行为。就好像它没有访问nodejs 服务器。 …

node.js nvm windows-subsystem-for-linux

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