小编Ahm*_*ssy的帖子

我正在尝试按照本指南将我的Angular应用程序从v5更新到v6 .

我成功运行了所有这些命令:

npm install -g @angular/cli
npm install @angular/cli
ng update @angular/cli

问题是我在运行此命令时出错:

ng update @angular/core
                  Package "@angular/flex-layout" has an incompatible peer dependency to "rxjs" (requires "^5.5.0", would install "6.2.0").
                  Package "@angular/compiler-cli" has an incompatible peer dependency to "typescript" (requires ">=2.7.2 <2.8", would install "2.6.2")
Incompatible peer dependencies found. See above.

我不知道如何处理这个问题并且我不想自己尝试以避免破坏应用程序.

有人可以建议做什么？

我目前的依赖关系如下:

{
 ....
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.10",
    "@angular/cdk": "^5.2.5",
    "@angular/common": "^5.2.10",
    "@angular/compiler": "^5.2.10",
    "@angular/core": "^5.2.10",
    "@angular/flex-layout": "^5.0.0-beta.14",
    "@angular/forms": "^5.2.10",
    "@angular/http": "^5.2.10", …

我试图通过使用删除包

npm uninstall (package_name) -s 

哪个从 package.json 中删除了包但没有从 node_modules 文件夹中删除它，那么如何从 node_modules 文件夹中删除这些未使用的包？

编辑：

我正在分享这个问答，因为我个人面临这个问题，使用了所有变体npm uninstall 但它没有从 node_modules 中删除包，所以我分享了帮助我删除了大约 10 个未使用的包的内容npm prune

我有一个问题.我正在关注我的工作https://www.airpair.com/ruby-on-rails/posts/authentication-with-angularjs-and-ruby-on-rails.

使用ng-token-auth和devise_token_auth

在Controller类MyController <ApplicationController before_filter:authenticate_user!中,除了:[:new,:create]

但所有API的调用都得到"过滤器链停止为:authenticate_user!呈现或重定向"

任何建议都会有帮助

我正在使用 React Antd v3 并将其升级到 v4，我注意到一个问题，其中自动完成组件已更改，现在它的行为方式很奇怪

传递一个 json 数组[{value: string, label: 123}]，除了在值选择时显示值（不是标签）外，一切正常

如何改为显示标签并保持选择的值作为选项值？

这是一个链接，显示了沙箱中的问题

传递选项数组的另一个链接也无法正常工作

笔记：

它在 Ant v3 中运行良好，如此链接所示

我一直在寻找几个小时来启用 jsPDF 库中的 UTF-8 支持，因为它是jsPDF 1.4 中发布的一个新功能，我找不到有用的资源来启用它

我在库中找到了两种方法addFont()&setFont()但官方文档中不清楚如何使用它们来使用新字体 & 如果它们相互依赖

我特别想添加一种支持阿拉伯语的字体，例如 (Roboto) 或任何支持阿拉伯语的基本字体

我正在使用的代码（& 适用于英语 html 但不适用于阿拉伯语）：

printAsPDF() {
    const elementToPrint = document.getElementById('report'); // The html element to become a pdf
    const pdf = new jsPDF();
    pdf.setFont('Helvetica');
    console.log(pdf.getFontList());

    pdf.fromHTML(elementToPrint, 30, 30);

    pdf.save('hello.pdf');
}

默认支持的字体：（输出getFontList()）：

Courier
Helvetica
Symbol
Times
ZapfDingbats
courier
helvetica
symbol
times
zapfdingbats

我在ngForm中有一个材料下拉列表,当我按需要设置此选项时,它旁边显示一个星号*但是如果我没有从下拉列表中选择任何选项,则该表单被视为有效.

<mat-form-field class="col-4 offset-1">
<mat-select placeholder="Some placeholder" [(value)]="data.name" required>
  <mat-option *ngFor="let name of names" [value]="name.value">
    name.viewValue
  </mat-option>
</mat-select>
</mat-form-field>

这与我将材质输入设置为required时会发生的情况不同,如果表单为空,则会使表单无效.

<mat-form-field class="col-4 offset-1">
 <input matInput name="dob" placeholder="Date Of Birth" [(ngModel)]="data.dob" required>
  </mat-form-field>

我更喜欢使用模板驱动的方法来解决这个问题而不是使用ReactiveForms(我找到了一些关于ReactiveForms的解决方案),任何人都可以帮助我吗？

注意:

我发现了一个类似标题的问题,但它使用的是FormGroup(reactiveForms)

我举了一个例子来说明这个stackblitz

我已经在不同的Angular版本中多次发现此问题，但是有多个消息来源说它已经得到解决，例如，关于Stackoverflow的另一个类似问题是有这个答案，它说它已在Angular 5.2中解决，在Github上还有其他问题在说在6.0.2中解决，我正在使用Angular 6.0.3，但是每当我尝试在HttpInterceptor类中注入使用HttpClient的服务时（仍然会收到一个问题）（如果在该请求中接收到jwt，则应该在请求中添加jwt令牌）服务）

我没有收到具有周期性依赖关系的警告或错误，请在浏览器控制台中看到数千个Interceptor正在调用服务的请求，反之亦然。

解决此问题的正确方法是什么？（最好不将jwt存储在本地存储中）

（即使用拦截器并从服务中获取jwt）

我的服务：

 ....
 // only showing parts that matter, HttpClient is injected here
 // to be used in calling the API services

  constructor(public http: HttpClient, private route: ActivatedRoute,
 public translate: TranslateService, private router: Router,
 public snackBar: MatSnackBar, private notification: NotificationService) {

//

我的HttpInterceptor：

import { Observable } from 'rxjs';
import { Location } from '@angular/common';
import { Injectable, Injector } from '@angular/core';
import { HttpInterceptor } from '@angular/common/http';
import { …

我收到此错误：this.props.postBooks不是函数。

我有一个动作-postBooks-我正尝试通过道具发送。

这是我的组件：

"use strict"

import React from 'react'
import {Well,Panel,FormControl,FormGroup,ControlLabel,Button} from 'react-bootstrap'
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import {postBooks} from '../../actions/booksActions'
import {findDOMNode} from 'react-dom'

export class BooksForm extends React.Component{

    handleSubmit(){
        const book = [{
            title: findDOMNode(this.refs.title).value,
            description: findDOMNode(this.refs.description).value,
            price: findDOMNode(this.refs.price).value
        }]
        this.props.postBooks(book)
    }
    render(){

        return(
            <Well>
                <Panel>
                    <FormGroup    controlId='title'>
                        <ControlLabel> Title </ControlLabel>
                        <FormControl    
                            type='text'
                            placeholder='Enter Title'
                            ref='title' />
                    </FormGroup>

                    <FormGroup    controlId='description'>
                        <ControlLabel> Enter Description </ControlLabel>
                        <FormControl    
                            type='text'
                            placeholder='Enter Description'
                            ref='description' />
                    </FormGroup>

                    <FormGroup    controlId='price'>
                        <ControlLabel> …

Angular 5材质，材质小吃栏仅对于自定义ErrorHandling无法正确显示，否则工作正常：

我正在尝试使用材质小吃栏显示后端错误，问题是第一次触发时，它出现在错误的位置（不是应该在底部中间，而是在左边），并且永远存在在那里而不会消失（根据我的配置，它应该在2秒后自动消失）

下次出现时，它将正确显示并在2秒钟后消失。

请在此处尝试该问题： 显示我的问题的stackblitz示例。

这里是stackblitz代码

谢谢

我使用Angular 6.0.8同Angular Material theme版本6.4.0

每当我尝试稍微修改材质主题时，它永远不会起作用，因为我总是发现材质主题属性会覆盖我的 CSS 属性，如下所示：

currentColor   .mat-input-element (material theme)
initial        input, textarea, select, button (user agent stylesheet)
#1072BA        .English
#1072BA        .English
#1072BA        body

仅应用第一个属性（其余的被删除）

我尝试了多种变体来解决这个问题，但没有一个奏效（比如使用重要的或改变导入主题的顺序）

那么在 Material 主题和用户样式表中更改小东西的正确方法是什么？（例如，应用此英语规则）

我的styles.scss如下，它运行良好，只有覆盖颜色和字体等材质主题不起作用：

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

/* You can add global styles to this file, and also import other style files */

/* prevent clicking in the wizard nav header */
.mat-horizontal-stepper-header{
  pointer-events: none !important;
}

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(./assets/material_icons/material_icons.woff2) …