标签: angular6

我正在尝试为我的Angular 6应用添加firebase支持但是在添加angularfire2时

npm install angularfire2 firebase

我得到很多警告说我必须使用Angular 5.例如

npm WARN angularfire2@5.0.0-rc.6.0 requires a peer of @angular/core@^5.0.0 but none is installed. You must install peer dependencies yourself.

今天可以使用angularfire2和Angular 6吗？

编译时出现此错误:

ERROR in node_modules/angularfire2/angularfire2.d.ts(3,10): error TS2305: Module '"/home/rrr/Projects/ng6test/node_modules/rxjs/Subscription"' has no exported member 'Subscription'.
node_modules/angularfire2/firebase.app.module.d.ts(10,22): error TS2720: Class 'FirebaseApp' incorrectly implements class 'FirebaseApp'. Did you mean to extend 'FirebaseApp' and inherit its members as a subclass?
  Property 'automaticDataCollectionEnabled' is missing in type 'FirebaseApp'.
node_modules/rxjs/Subscription.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Subscription'.

我试图安装rxjs-compat,但之后又收到了警告

ERROR in …

我有一个电子邮件字段,我添加了两个验证器(必需,电子邮件),我想检查验证状态,input event以便在我的系统成员有效时调用API检查剂量,如果它invalid不调用API并且不要t在页面上显示错误消息.

我将在模糊事件(focusOut电子邮件的输入)上显示错误消息,首先我用于formControl.validator(formControl)触发验证器并检查formControl.valid,我获得了有效状态,但它会在页面上显示错误消息,因为我订阅statsuChange时显示错误消息,当状态等于invalid.

目前,我在一个变量中保存验证器并传递initEmailChaingeEvent()给检查验证状态而没有statusChange事件.它可以工作,但我认为这不是一个好方法,这是我的实现的一个例子:

实例

export class AppComponent {
  public sampleForm: FormGroup;

  @ViewChild('emailElm')
  emailElm: ElementRef;

  ngOnInit() {
    this.initForm();
  }

  initForm() {
    const emailValidtors = [
      Validators.required,
      Validators.email
    ]

    const emailFC = new FormControl(null, {
      validators: emailValidtors,
      updateOn: 'blur'
    });
    //
    this.sampleForm = new FormGroup({
      'email': emailFC
    });
    //
    this.initEmailChaingeEvent({
      emailFC: emailFC,
      validtors: emailValidtors
    });
    //
    this.sampleForm.valueChanges.subscribe((val) => {
      console.log('_blue event:valueChanges', val)
    });
    //
    this.initShowErrorMsgEvent({
      fc: emailFC
    }); …

我正在尝试显示从服务器检索到的数据（使用 Angular 6、Rxjs 和 Chartjs），并使用该数据呈现图表。如果我使用本地模拟数据，一切都会呈现得很好。但是，如果我使用从服务器获取数据，则无法提供用于呈现图形的必要数据，因此图表将呈现为空白图表。

简介： 一个组件进行服务调用，并准备一个对象以使用来自服务调用的响应向下传递给子组件。然而，当响应准备好时，对象已经在没有必要信息的情况下发送了。

服务代码片段：

  getAccountsOfClientId(clientID: string): Observable<Account[]> {
    return this.http.get<Account[]>(`${this.BASE_URL}/accounts?client=${clientID}`)
      .pipe(
        tap(accounts => console.log('fetched client\'s accounts')),
        catchError(this.handleError('getAccountsOfClientId', []))
      );
  }

在client-info.component.ts（进行服务调用的组件，准备传递对象给子组件）

@Input() client; // received from another component, data is filled

  constructor(private clientAccountService: ClientAccountService) { }

  ngOnInit() {
    this.getAccountsOfClientId(this.client.id);
  }

  ngAfterViewInit() {
    this.updateChart(); // render for pie chart
    this.updateBarChart(); // render for bar chart
  }

  getAccountsOfClientId(clientID: string): void {
    this.clientAccountService.getAccountsOfClientId(this.client.id)
      .subscribe(accounts => this.clientAccounts = accounts);
  }

  updateBarChart(updatedOption?: any): void {
    /* unrelated operations above …

我使用Angular,我只在Firefox" [WDS] Disconnected! " 上获得控制台错误.

这是我的Angular-Cli版本.

Angular CLI: 6.0.1
Node: 8.11.1
OS: win32 x64
Angular: 6.0.1
... cli, common, compiler, compiler-cli, core, forms, http
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.1
@angular-devkit/build-angular     0.6.1
@angular-devkit/build-optimizer   0.6.1
@angular-devkit/core              0.6.1
@angular-devkit/schematics        0.6.1
@angular/animations               6.0.4
@ngtools/webpack                  6.0.1
@schematics/angular               0.6.1
@schematics/update                0.6.1
rxjs                              6.2.0
typescript                        2.7.2
webpack                           4.6.0

我正在为我的 angular 项目中的一个问题寻找解决方案，ng serve --watch但未检测到某些文件中的更改。

我得到了一个解决方案，上面写着使用 --poll=2000

它真的奏效了。

但是没有关于 flag poll功能的明确信息。

我在 angular.json 样式数组中包含了一些样式，如下所示：

 "styles": [
              "src/styles.css",
              "node_modules/primeicons/primeicons.css",
              "node_modules/primeng/resources/themes/omega/theme.css",
              "node_modules/primeng/resources/themes/bootstrap/theme.css",
              "node_modules/primeng/resources/primeng.min.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/font-awesome/css/font-awesome.css"
            ]

但它不是选择样式，因为我看不到primeng 表样式和其他样式。虽然如果我在我的 styles.css 文件中导入样式，它会正常工作，如下所示：

@import '../node_modules/primeng/resources/themes/omega/theme.css';
 @import '../node_modules/primeng/resources/themes/bootstrap/theme.css';
 @import '../node_modules/primeicons/primeicons.css'

我相信我们可以使用上述任何方法，如果这不正确，请告诉我。

我也多次重新启动 ng serve。

任何帮助表示赞赏。感谢期待。

我正在使用 angular 6，因为它在 angular.json 中很明显，如果需要共享任何其他代码或信息，也请告诉我。

在画布上绘图工作得很好.即使橡皮擦也工作得很好.问题是,当画布保存为图像时,它绘制的是黑色线而不是橡皮擦.

为了更好地理解,我添加了屏幕截图和代码.

1.在删除抽奖时 -

一个.源代码 -

erase(){
      this.ctx.globalCompositeOperation = 'destination-out';
    } 

handleMove(ev){

  // let ctx = this.canvasElement.getContext('2d');
  let currentX = ev.touches[0].pageX - this.offsetX;
  let currentY = ev.touches[0].pageY - this.offsetY;

  this.ctx.beginPath();
  this.ctx.lineJoin = "round";
  this.ctx.moveTo(this.lastX, this.lastY);
  this.ctx.lineTo(currentX, currentY);
  this.ctx.closePath();
  this.ctx.strokeStyle = this.currentColour;
  this.ctx.lineWidth = this.brushSize;
  this.ctx.stroke();      


  this.undoList.push({
    x_start: currentX,
    y_start: currentY,
    x_end: this.lastX,
    y_end: this.lastY,
    color: this.currentColour,
    size: this.brushSize,
    mode: this.ctx.globalCompositeOperation
  });

  this.lastX = currentX;
  this.lastY = currentY;

}

湾 输出 -

2.画布保存为图像 -

一个.代码 -

this.ctx.clearRect(0, 0, this.canvasElement.width, this.canvasElement.height);
    setTimeout(() …

我有metronic_v5.5.2 Angular版本，我正在尝试将其angular版本与我的后端API集成在一起。

因为我对这一切还很陌生，所以现在问题出在我的代理配置上，该配置无法按照我的期望工作。

以下是proxyconfig.json文件的代码

{
    "/api": {
        "target": "https://localhost:5001",
        "secure": false,
        "changeOrigin": true,
        "logLevel": "debug"
    }
}

图像显示请求正在路由到URL“ https：// localhost：5001 / api / auth / login” POST / api / auth / login-> https：// localhost：5001

但是，在浏览器的控制台中，此请求实际上是路由到URL ，它返回401错误，网址为http：// localhost：4200 / api / auth / login。我无法通过单击按钮将其路由到URL：https：// localhost：5001 / api / auth / login

以下是HTML代码

<!--begin::Form-->
<form class="m-login__form m-form" name="form" (ngSubmit)="f.form.valid && submit()" #f="ngForm" novalidate>
    <div class="form-group">
        <mat-form-field>
            <mat-label>Email</mat-label>
            <input matInput type="email" name="email" placeholder="Email address" autocomplete="off" [(ngModel)]="model.email" #email="ngModel" email="true" required> …

我有3个功能,我想一个接一个地打电话

openTryFunction(){
    // function one
    this.functionOne();
    // after function one
    this.functionTwo();
    // after function two
    this.functionTree(); }

我开始学习Angular，并且正在学习教程。我试图按照教程中的导航栏放置代码：

<nav class="navbar navbar-default">
  <div class="container-fluid">
     <div class="navbar-header">
         <a href="#" class="navbar-brand">Recipe book</a>
     </div>
     <div class="collapse navbar-collapse">
         <ul class="nav navbar-nav">
             <li> <a href="#">Recipe</a></li>
             <li> <a href="#">Shopping list</a></li>
         </ul>
         <ul class="nav navbar-nav navbar-right">
              <li class="dropdown">
                  <ul class="dropdown-menu">
                      <li><a href="#">Save data </a></li>
                      <li><a href="#">Fetch data </a></li>
                  </ul>
              </li>
         </ul>
     </div>
  </div>
</nav>

但是我所得到的是：

如果删除引导程序，则可以得到其他项。

我曾经npm install bootstrap --save和@import "~bootstrap/dist/css/bootstrap.css";Styles.css中使用的引导。

编辑：

我不想打开一个有两个问题的问题，但是在看了到目前为止到目前为止还不能描述另一个问题的答案之后：

我还使用安装了Jquery nmp install jquery --save并将其添加到angular.json中：

"styles": [
          "node_modules/bootstrap/dist/css/bootstrap.css",
          "src/styles.css"
        ],
        "scripts": [
          "node_modules/jquery/dist/jquery.min.js",
          "node_modules/tether/dist/js/tether.js",
          "node_modules/bootstrap/dist/js/bootstrap.min.js"

在这种情况下，@import …