小编Ger*_*son的帖子

Angular2 RC6禁用输入

以前在我的Angular2 RC5应用程序中,我有一个输入元素,如下所示:

<input type="text" formControlName="blah" disabled/>
Run Code Online (Sandbox Code Playgroud)

目的是使用户在编辑模式下不可编辑该字段; 因此禁用属性.

升级到Angular2 RC6后,我在控制台中收到以下消息:

看起来您正在使用带有反应式表单指令的disabled属性.如果在组件类中设置此控件时将disabled设置为true,则实际将在DOM中为您设置disabled属性.我们建议使用此方法来避免"检查后更改"错误.

例:

form = new FormGroup({
   first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
   last: new FormControl('Drew', Validators.required)
});
Run Code Online (Sandbox Code Playgroud)

但是,如果我遵循此建议,删除我的禁用属性并将我的FormControl替换为禁用设置为true,那么该字段不会在提交时发布(即它不会出现在form.value中).

我是否错误地编码了这种情况?是否有一种方法可以将禁用的FormControl包含在表单值中?

作为旁注,我实际上正在使用FormBuilder而不是设置每个FormControl,如果这有所不同.

angular

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

Angular2动态加载模板

我开始研究使用Angular2和我遇到的一个我无法找到解决方案的问题.我要求根据我从模型中收到的数据,我希望为给定的组件加载不同的模板.这主要与根据我收到的数据维护不同的布局有关.这可能吗?

谢谢

angularjs-templates angularjs-components angular

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

同时将多个滑动滑块同步

我正在使用Slick Slider并希望将3个滑块同步到一起.

我有一个问题的JSfiddle:

https://jsfiddle.net/rk0tuoy7/1/

HTML:

<section class="slider">
    <div>slide1</div>
    <div>slide2</div>
    <div>slide3</div>
    <div>slide4</div>
    <div>slide5</div>
    <div>slide6</div>
</section>

<section class="slider2">
    <div>slide1</div>
    <div>slide2</div>
    <div>slide3</div>
    <div>slide4</div>
    <div>slide5</div>
    <div>slide6</div>
</section>

<section class="slider3">
    <div>slide1</div>
    <div>slide2</div>
    <div>slide3</div>
    <div>slide4</div>
    <div>slide5</div>
    <div>slide6</div>
</section>
Run Code Online (Sandbox Code Playgroud)

JS:

$(".slider").slick({});
$(".slider2").slick({ asNavFor: '.slider' });
$(".slider3").slick({ asNavFor: '.slider2' });
Run Code Online (Sandbox Code Playgroud)

我可以让滑块1与滑块2同步,我可以让滑块2与滑块3同步,但我不能让所有3个一起工作.有没有办法让这个工作?

谢谢

javascript jquery slick.js

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

在Angular模板绑定中剥离html

我有一个列表,显示有时可能包含HTML的数据

  <li *ngFor="let result of results">
    <span [innerHTML]="result.question.title">
    </span>
  </li>
Run Code Online (Sandbox Code Playgroud)

使用的问题innerHTML是HTML被解析和渲染,所以像<p>标签这样的东西会增加边距并破坏列表的对齐.

我想剥离所有的html标签,只输出纯文本.

像这样的方法:

  <li *ngFor="let result of results">
    <span>
        {{result.question.title}}
    </span>
  </li>
Run Code Online (Sandbox Code Playgroud)

不剥离HTML,它只是将HTML作为纯文本输出.

如何剥离HTML并将纯文本保留为"Angular"方式?

html angular2-template angular

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

使用 webpack 从 react-rails 应用程序中的 node_modules 加载字体

我有一个使用 webpacker 设置的 react-rails 应用程序。

我正在尝试使用来自 node_modules 的字体加载 font-awesome-pro。

我认为这是一项微不足道的任务,但我似乎找不到关于如何执行此操作的任何好的文档。

这是我到目前为止:

package.json 依赖项:

  "dependencies": {
    "@rails/webpacker": "3.5",
    "babel-preset-react": "^6.24.1",
    "bootstrap": "^4.1.3",
    "prop-types": "^15.6.2",
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-slick": "^0.23.1",
    "react_ujs": "^2.4.4",
    "slick-carousel": "^1.8.1",
    "tachyons-z-index": "^1.0.9"
  },
  "devDependencies": {
    "@fortawesome/fontawesome-pro": "^5.2.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-env": "^1.7.0",
    "file-loader": "^2.0.0",
    "path": "^0.12.7",
    "webpack-dev-server": "2.11.2"
  }
Run Code Online (Sandbox Code Playgroud)

文件.js:

var path = require('path');

module.exports = {
  test: /\.(woff(2)?|eot|otf|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    exclude: path.resolve(__dirname, '../../app/assets'),
    use: {
      loader: 'file-loader',
      options: {
        outputPath: 'fonts/',
        useRelativePath: false
      }
    }
}
Run Code Online (Sandbox Code Playgroud)

环境.js

const { …
Run Code Online (Sandbox Code Playgroud)

ruby ruby-on-rails webpack react-rails webpacker

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