标签: angular6

这是我的文件userdata.service.ts:

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import {Observable} from 'rxjs';
import { map } from "rxjs/operators";
import { catchError } from 'rxjs/operators';
import { Data } from './userdata';

@Injectable()
export class UserDataService {

  url : "http://localhost:4200/assets/data/userdata.json";
  constructor(private http:Http) { }  

  getDataWithObservable() : Observable<any>{
      return this.http.get(this.url)
            .pipe(
              map(this.extractData),
              catchError(this.handleErrorObservable)
            );
  }

    private extractData(res: Response) 
    {
        let body = res.json();      
        return body;
    }

    private handleErrorObservable (error: Response | any) 
    {   
        return Observable.throw(error.message || error); …

我正在使用垫树角材料组件.这是一个很好的组件,有一些非常有用的功能,如多选,全部展开/全部折叠.我无法在任何API中找到任何树过滤功能.有没有人遇到这个功能或做任何工作来获得mat-tree过滤器？

请注意,分页/排序无法正常工作.分页不显示它显示的元素数量,并且排序不起作用,但是如果删除html文件中的行*ngIf ="dataSource？.filteredData.length> 0",则错误是固定的.如果您使用过滤,它可以工作,但它不会显示过滤器数量

检查示例.

https://stackblitz.com/edit/angular-wqkekh-nm3pn2?file=app/table-pagination-example.html

我最近将我的项目从Angular5更新为Angular6.该项目正在成功构建,但我在浏览器控制台中收到以下错误:

未处理的Promise拒绝:StaticInjectorError(AppModule)[options]:StaticInjectorError(Platform:core)[options]:NullInjectorError:没有选项提供者!; 区域:; 任务:Promise.then; 值:错误:StaticInjectorError(AppModule)[options]

有关如何调试这些问题的任何想法？

这是我的app.module:

import { BrowserModule } from '@angular/platform-browser';
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { RouterModule, Routes } from '@angular/router';
import { CookieModule } from 'ngx-cookie';
import { PushNotificationsModule, PushNotificationsService } from 'ng-push';

// importing notifications module (angular 2 notifications)
import { SimpleNotificationsModule, …

我正在学习角度,我对这些可观察,观察和订阅的事情感到困惑.所以请解释一下.

我的情况如下:

我想要实现的是:

1. 当用户单击All时,将选择所有选项,当用户再次单击All时,将取消所有选项.
2. 如果所有选项被选中,并单击用户比任何其他复选框, All然后所有,并点击复选框将被取消.
3. 当用户逐个选择4个选项时,则选择All.

HTML文件

<mat-select placeholder="User Type" formControlName="UserType" multiple>
    <mat-option *ngFor="let filters of userTypeFilters" [value]="filters.key">
          {{filters.value}}
    </mat-option>
        <mat-option #allSelected (click)="toggleAllSelection()" [value]="0">All</mat-option>
</mat-select>

TS文件

this.searchUserForm = this.fb.group({
  userType: new FormControl('')
});

userTypeFilters = [
  {
    key: 1, value: 'Value 1',
  },
  {
    key: 2, value: 'Value 2',
  },
  {
    key: 3, value: 'Value 3',
  },
  {
    key: 4, value: 'Value 4',
  }
]

toggleAllSelection() {
  if (this.allSelected.selected) {
    this.searchUserForm.controls.userType …

如果我添加在angular.json文件中

"styles": [
  "src/styles.css",
  "src/utility/vendor/bootstrap/css/bootstrap.css",
  "src/utility/vendor/font-awesome/css/fontawesome-all.min.css",
  "src/utility/vendor/animate.css/animate.min.css",
  "src/utility/vendor/slick-carousel/slick/slick.css",
  "src/utility/css/front.css",
  "src/utility/css/codepen.css"
],

这些文件仅可用于index.html文件访问，而不能访问app.component.html或任何组件，甚至其他组件也不会使用与index.html相同的内容进行渲染，但是index.html可以正常工作

以前的行为:

导航到另一条路线时,更改路线或导航路径不会影响滚动位置.即内容可以在没有滚动位置改变的情况下改变.

目前的行为:

更改路线将使您回到页面顶部.

迄今采取的行动:

测试了当前和新的Angular 6项目

这是一个错误吗？功能改变？或者是否有我缺少的参数.

我正在尝试实现通配符模块,我似乎没有得到它的工作:

现在我有以下代码可行:

typings.d.ts

declare module "*.json" {
  const value: any;
  export default value;
}

app.component.ts

import { Component, OnInit } from '@angular/core';
import * as es from './i18n/es.json';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  hello = '-';

  ngOnInit() {
    this.hello = es.default.hello;
  }
}

您可能会看到一个活生生的例子在这里,但是我想实现通配符,因为看到这里(typescriptlang)和这里(SitePen接触):

实现应该允许我做这样的事情:

typings.d.ts

declare module "*.json!i18n" {
  const value: any;
  export default value;
}

declare module "*.json!static" { …

这是我的代码,给出错误无法读取属性标题undefined.

父组件

import { Child } from './child.component';
@Component({
  selector: 'parent',
})
export class ParentComponet implements OnInit, AfterViewInit {
 constructor(){}

  @ViewChild(Child) child: Child;

  ngAfterViewInit(){
    console.log("check data", this.child.title)
  }
}

和儿童组件是.

@Component({
      selector: 'child',
    })
    export class ChildComponet {

     public title = "hi"
     constructor(){}

    }

routing.module.ts就像

{
        path: "",
        component: ParentComponent,
        children: [
            {
                path: '/child',
                component: ChildComponent
            }
        ]
}

并且给出了错误

ERROR TypeError: Cannot read property 'title' of undefined(…)