标签: angular5

我已经将应用程序从Angular 4.2升级到5,但是出现了这个错误: unhandled exception occurred while processing the request更具体地说:

NodeInvocationException:没有PlatformRef的提供者!错误:没有PlatformRef的提供程序!at injectionError(e:\ myapp\ClientApp\dist\vendor.js:12066:90)

该应用程序还使用webpack和ASP.NET Core.

我安装了node v9.1,和typescript 2.6.1.

我也package.json用命令更新了:

npm install @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest @angular/animations@latest typescript@latest 

然后,运行以下内容:

 npm install --save-dev @ngtools/webpack@latest

我也用过HttpClient而不是Http:

import { HttpClient } from '@angular/common/http'; 
.....
 getThings() {
        return this.http.get('/api/things');

  }

如果我降级回Angular 4,该应用程序工作正常,我的思路中是否有任何错误的做法？

我正在使用下面的代码在angular4中测试一个简单的递归Treeview组件.但每当我试图扩大儿童观点时toggle().

我收到一个异常错误:

错误TypeError:_v.context.$ implicit.toggle不是函数

谢谢

树view.component.ts

export class TreeViewComponent implements OnInit {  
  constructor() { }
  ngOnInit() {}     
  @Input() directories: Directory[];
}

树view.component.html

<ul>
  <li *ngFor="let dir of directories">
    <label (click)="dir.toggle()"> {{ dir.title }}</label>
    <div *ngIf="dir.expanded">
      <tree-view [locations]="dir.children"></tree-view>
    </div>
  </li>
</ul>

Directory.ts

 export class Directory{

      title: string;
      children: Directory[]
      expanded = true;
      checked = false;

  constructor() {

  }

  toggle() {
    this.expanded = !this.expanded;
  }

  getIcon() {
    if (this.expanded) {
      return '-';
    }
    return '+';
  }
}

我是Angular5的初学者,我需要你的帮助......

我在我的后端(Java/Spring Boot)中创建了一个API,我可以访问它 http://localhost:8080/applications

使用此API,我想检索一大块数据(它是一个JSON数组).

我尝试在我的Angular上使用httpClient检索数据,但我在前端有这个结果:[object Object]

这是我的app.component.ts

    import {Component, Injectable} from '@angular/core';
    import {HttpClient, HttpErrorResponse} from "@angular/common/http";
    import {Observable} from "rxjs/Observable";
    import 'rxjs/add/operator/map';

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.scss']
    })

    export class AppComponent {
      url = 'http://localhost:8080/applications';
      res = [];

      constructor(private http: HttpClient) {
      }


      ngOnInit(): void {

        this.http.get(this.url).subscribe(data => {
            this.res = data;
            console.log(data);
        },
          (err: HttpErrorResponse) => {
            if (err.error instanceof Error) {
              console.log("Client-side error occured.");
            } else {
              console.log("Server-side error occured.");
            }
          });

      } …

我正在尝试使服务工作者能够与API请求一起工作。我希望该应用离线运行，并具有以下配置：

    {
        "name": "api",
        "urls": ["https://x.com/**"],
        "cacheConfig": {
            "strategy": "performance",
            "maxSize": 20,
            "maxAge": "365d",
            "timeout": "5s"
        }
    }

这是我离线时xhr标签的外观：

这是用户请求的内容：

如您所见，用户的API调用无法解析。

这是user在线时的响应：

Angular2 Material Component有一个DatePicker,以默认格式显示日期.

并且仅支持"fa-IR"本地更改.

如何格式化以显示波斯日期？

我试图用包含columns definition和它的结构化数据实现网格组件data array.

callback每列的定义中都有一个函数,用于自定义显示该列的值.

在每个内部callback,它调用console.log()来显示回调函数的调用次数.

我不知道为什么回调函数在开始时调用了四次,并且two times在changeSort()事件发生后!请告诉我.

我写了下面的表组件:

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

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css']
})
export class TableComponent implements OnInit {

  // @Input() public grid: {
  //   columns: any[],
  //   data: any[]
  // };

  public grid: any;

  constructor() {
    this.grid = {
      columns: [],
      data: [],
    };
  }

  ngOnInit() {
    this.grid = {
      data: [
        {
          desc: 'hello 1',
          header: …

我正在为REST API开发Angular Client。

我的api公开如下网址：

https://server.com/users/detail/3

其中3是参数。

我尝试使用Angular Client生成路径变量，但无法执行。我尝试

getUser(username: string) {
const options = {
  params: new HttpParams().set('username', username)
};

return this.http.get<User>('detail/{username}', options); }

但是结果不正确。有人能帮我吗？

编辑

在尝试解决方案后，它仍然无法正常工作。如果

 getUser(username: string) {
const options = {
  params: new HttpParams().set('username', username)
};

const resource = 'detail/' + username;
return this.http.get<any>(resource);  }

这个解决方案似乎我太可怜了，Angular HttpClient有这个解决方案吗？

我想动态地调用一个变量。

export class AppComponent  {
  my_a_variable = 'test a';
  my_b_variable = 'test b';
  type = 'a'; // this variable value will come from another place dynamically.
}

在我的HTML中，我需要像

<div>{{my_{{type}}_variable}}</div>

我知道可以用assoc数组解决，但是我不能在这里使用它。你能帮忙吗？

谢谢。

我正在使用此日期时间选择器：-https: //www.npmjs.com/package/angular2-datetimepicker
官方文档链接：-https : //cuppalabs.github.io/angular2-datetimepicker/#/datetimepicker。

现在，我已经成功实现了它。它工作正常，但没有显示时间选择器。根据他们的文档，我已经设置了timepicker：false和timepicker：true。

在component.ts文件中。

date: Date = new Date();
settings = {
    bigBanner: true,
    format: 'dd-MMM-yyyy hh:mm a',
    defaultOpen: true
}

在component.html文件中。

 <angular2-date-picker [(ngModel)]="date" [settings]="settings"></angular2-date-picker>

屏幕截图。

编辑：- 我认为问题是设置对象无法从.ts文件工作，因为如果我删除设置对象，那么它也只会显示日期。

我无法以反应式形式初始化mat-slide-toggle。

我在模板中有类似的东西

<mat-slide-toggle name="X" formControlName="X" color="primary"></mat-slide-toggle>

在控制器中

X:  new FormControl(true, [
      Validators.required
    ])

我也尝试用1或0或false代替true，但是我没有选择默认值。

如果有人可以帮助我，我将非常感谢。