标签: angular7

目前我有以下代码来填充表格。

在 component.ts 中：

import { HttpClient } from "@angular/common/http";
import { Component, OnInit } from "@angular/core";
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
import { ActivatedRoute, Router } from "@angular/router";
import { MatTableDataSource } from "@angular/material/table";

@Component({
  styleUrls: ["./styles.scss"],
  templateUrl: "./template.html"
})
export class MyRouteData {
  employeeInfoTable: object;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http
      .get("http://localhost:5000/MyRoute/GetEmployeeInfo")
      .subscribe(response => {
        this.employeeInfoTable = response;
      });
  }
}

我的 template.html 文件如下所示：

<mat-card style="height: 98%">
  <div style="height: 95%; overflow: auto;">
      <table class="MyNiceStyle"> …

之后更新我的角6.1应用角7，我得到这个错误有ng serve：

ERROR in node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(25,15): error TS2416: Property '_registry' in type 'MockMatchMedia' is not assignable to the same property in base type 'MatchMedia'.
  Type 'Map<string, MockMediaQueryList>' is not assignable to type 'Map<string, MediaQueryList>'.                 
    Type 'MockMediaQueryList' is not assignable to type 'MediaQueryList'.                                         
      Property 'onchange' is missing in type 'MockMediaQueryList'.                                                
node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(63,22): error TS2420: Class 'MockMediaQueryList' incorrectly implements interface 'MediaQueryList'.                                           
  Property 'onchange' is missing in type 'MockMediaQueryList'.                                                    
node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(80,27): error TS2304: Cannot find name 'MediaQueryListListener'.                                                                              
node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(82,23): error TS2304: Cannot find …

我正在尝试将角材料 mat-select 与反应形式一起使用，并收到错误消息“没有名称用于表单控件的值访问器：'productUnitofMeasure'”。

其他 FormControl 在这里工作正常，我已经在 app 模块中包含了所有必需的模块。

应用模块：

import {MatFormFieldModule, MatOptionModule, MatSelectModule, MatInputModule} from '@angular/material';

imports:[
MatFormFieldModule,
MatOptionModule,
MatSelectModule,
MatInputModule,
ReactiveFormsModule]

模板：

<mat-form-field>
<mat-select placeholder="Unit Type">
    <mat-option *ngFor="let unitType of unitList" matInput formControlName="productUnitofMeasure" [value]="unitType.unitId">{{unitType.unitDescription}}</mat-option>
</mat-select>

成分：

this.productForm = new FormGroup({
  productName: new FormControl,
  productDescription: new FormControl,
  productPrice: new FormControl,
  productAvailableQuantity: new FormControl,
  productUnitofMeasure: new FormControl //this is the only control giving me an error.


});

使用Angular 7我将材质表添加到我的应用程序中 ng generate @angular/material:table test-table

在生成的模板内有一个分页器：

<mat-paginator #paginator
    [length]="dataSource.data.length"
    [pageIndex]="0"
    [pageSize]="50"
    [pageSizeOptions]="[25, 50, 100, 250]">
</mat-paginator> 

在初始化时，数据源已更改：

ngOnInit() {
  this.dataSource = new ItemsTableDataSource(
    this.paginator,
    this.sort,
    this.route.paramMap,
    this.afs
 );
}

尝试在Karma上编译组件时，expect(component).toBeTruthy();出现以下错误

Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has 
changed after it was checked. Previous value: 'length: 0'. Current 
value: 'length: 1'.

我该如何解决这个问题？

我正在尝试设置一个类似 的 URL 'user/:id/edit'，但是当我使用[routerLink]="['user/:id/edit', 1]"它时会生成/user/:id/edit/1.

如果我使用[routerLink]="['user/:id/edit', {id: 1}]"它会生成/user/:id/edit;id=1

有没有办法在/users/1/edit不使用字符串插值的情况下获得输出？

我有以下 Angular 7 组件：

export class PostComponent implements OnInit {

  post$: Observable<PostModel>;

  constructor(private postService: PostService) { }

  ngOnInit() {

    this.post$ = postService.getPostById(25);

  }

}

在组件模板上，我使用了以下内容：

<p>Title: {{post$.title}}</p>

标题显示为空，我认为是因为 post$ 是一个 Observable。

使用数组时，例如posts$: Observable<PostModel[]>我将 observable 传递给模板，并且使用ngFor.

但是在这种情况下我应该怎么做呢？

用数组观察

使用数组的 Observable 时，我在 HTML 模板中有以下内容：

<div *ngIf="(posts$ | async)?.length > 0; else loading">
  <ng-container *ngFor="let post of posts$ | async">
    {{post.title}}
  </ng-container>
</div>
<ng-template #loading>
  Loading ...
</ng-template>

这允许我在加载时显示加载消息。

一个问题:

<button (click)="activateMotion(1)">
    <img class="emotion-icon" id="positive-icon" src="" />
</button>
<button (click)="activateMotion(-1)">
    <img class="emotion-icon" id="negative-icon" src="" />
</button>

我有两个按钮,其值为图像.我想写一个函数调用:activateMotion().我想在值1或-1的基础上更改按钮内的图像.我可以使用jQuery来实现这个目标,但我正在Angular中编写应用程序.

我在谷歌搜索了解决方案，但没有找到。

尝试 1：

<input type="text" #txtSearch (keyup)="onKeyUp(txtSearch.value)">

和 search.component.ts

onKeyUp(val){
    setTimeout(function(){
        console.log(val);
    },500);
}

试过 2

我在这里使用类似的如何在 angular2 中使用 rxjs 实现输入 keyup 事件的去抖动服务，但在 Angular 7 中不起作用。

最后

我希望 keyup 延迟 0.5s 然后 console.log(value);

尝试对现有的和最近迁移的Angular 7项目运行简单的效果测试。但是我得到如下错误。

错误：未 在新TestHotObservable（node_modules / jasmine-marbles / es6 / src / test-observables.js：21：39）的getTestScheduler（node_modules / jasmine-marbles / es6 / src / scheduler.js：11：1）初始化任何测试计划程序）在Module.hot（node_modules / jasmine-marbles / es6 / index.js：7：1）

我的效果规范文件中的代码是茉莉花大理石的基本标准检查。

const action = new Load(request);
const completion = new LoadSuccess(result);

actions$ = hot('-a-', { a: action});
const response = cold('-a|', {a: result});
const expected = cold('--b', {b: completion});
service.getSomething.and.returnValue(result);
expect(effects.load$).toBeObservable(expected);

有人看过并解决过此错误吗？

我有一个延迟加载的项目，它有2个模块（module.ts除外）view.module.ts和view2.modules.ts。我想在两个模块中使用一个名为editform.component.ts的组件。可能吗？？