标签: angular9

它一直工作到 Angular 7，现在更新后它会抛出未知元素的错误。共享模块会发生这种情况。

可重现的代码： - https://stackblitz.com/edit/angular-ivy-pb3eea

所以我有一个父组件“Parent”，子组件在“Parent”的路由器内使用 - “Child”，一个共享组件在父组件和子组件内部使用 - “Shared”

所以我已经导入了父模块和子模块。（与使用惰性模块一样），在父级中它可以工作，但在子级中则不起作用。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TestChildRoutingModule} from './test-child.routing.module';
import { SharedModule } from '../shared/shared.module';

@NgModule({
    declarations: [
    ],
    imports: [
        CommonModule,
        SharedModule,
        TestChildRoutingModule
    ],
    exports: [
    ]
})
export class TestChildModule { }

这似乎很容易，但我就是无法让checked滑动切换的绑定工作。

（我正在使用 Angular9.1和 Material 9.2。）

这是 HTML：

<mat-slide-toggle [checked]="isSlideChecked" (change)="toggleChanges($event)">isSlideChecked: {{isSlideChecked}}</mat-slide-toggle>

<p *ngFor="let e of toggleEvents">{{e}}</p>

这是 TS：

import { Component, OnInit } from '@angular/core';
import { MatSlideToggleChange } from '@angular/material/slide-toggle';

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

  public isSlideChecked: boolean = false;
  public toggleEvents: string[] = [];

  constructor() { }

  ngOnInit(): void {
  }

  toggleChanges($event: MatSlideToggleChange) {
    this.toggleEvents.push("Toggle Event: " + $event.checked)
  }
}

该change事件工作正常， …

虽然 Angular HttpClient 中有一个重载的 API 方法，如下所示：

 post(url: string, body: any | null, options: {
        headers?: HttpHeaders | {
            [header: string]: string | string[];
        };
        observe?: 'body';
        params?: HttpParams | {
            [param: string]: string | string[];
        };
        reportProgress?: boolean;
        responseType: 'text';
        withCredentials?: boolean;
    }): Observable<string>;

当我尝试使用选项 'responseType: 'text'' 执行以下发布请求时，我收到编译器错误，指出“没有重载与此调用匹配。...”

const opts = {
      headers: new HttpHeaders({
        'Accept': 'text/html, application/xhtml+xml, */*',
        'Content-Type': 'text/plain; charset=utf-8'
      }),
      responseType: 'text'
    };
    return this.http.post<string>('url', null, opts);

注意：我明智地传递 null 作为响应主体，因为我的 API 不接受主体。我在这里做的可能是错的吗？

更新 根据 Michael D 的要求添加完整的错误消息 …

我试图根据自定义单元格渲染器中的各种条件显示或隐藏按钮。

这是我的渲染器的模板：

<div class="btn-toolbar" style="justify-content: flex-start; display: flex;">
    <button (click)="editStage()" type="button" class="btn-xs btn btn-primary btn-default btn-space"><span class="fas fa-edit"></span></button>
    <button (click)="gotoSteps()" type="button" class="btn-xs btn btn-primary btn-default btn-space"><span class="fas fa-code-branch"></span></button>
    <button *ngIf="stage.order > 0 && nbrStages > 1" (click)="moveUp()" type="button" class="btn-xs btn btn-primary btn-default btn-space"><span class="fas fa-arrow-up"></span></button>
    <button *ngIf="orderPlusOne < nbrStages && nbrStages > 1" (click)="moveDown()" type="button" class="btn-xs btn btn-primary btn-default btn-space"><span class="fas fa-arrow-down"></span></button>
   <button (click)="deleteStage()" type="button" class="btn-xs btn btn-primary btn-default btn-space"><span class="fa fa-trash-alt"></span></button>
</div>

这是组件代码

@Component({
    selector: 'app-workflow-stage-buttons',
    templateUrl: './workflow-stage-buttons.component.html',
    styleUrls: …

我有一个材料步进器，步进器的每个步骤都有表格。在那里，每个步骤都应该由与其关联的表单控制。

尽管这个问题已经在 SO 中提出，但这些问题的答案并不能解决我的问题。因此我才问。

父 HTML

<mat-horizontal-stepper linear #stepper>
    <mat-step [stepControl]="frmStepOne">
        <ng-template matStepLabel>Step One Details</ng-template>
        <app-first-step #stepOne></app-first-step>
    </mat-step>
    <mat-step [stepControl]="frmStepTwo">
        <ng-template matStepLabel>Step Two Details</ng-template>
        <app-second-step #stepTwo></app-second-step>
    </mat-step>
</mat-horizontal-stepper> 

在我的父组件中，我有以下内容。

@ViewChild('stepOne') stepOneComponent: FirstStepComponent;
@ViewChild('stepTwo') stepTwoComponent: SecondStepComponent;


get frmStepOne() {
    return this.stepOneComponent ? this.stepOneComponent.frmStepOne : null;
}

get frmStepTwo() {
    return this.stepTwoComponent ? this.stepTwoComponent.frmStepTwo : null;
}

我的孩子类组件

frmStepOne: FormGroup;

constructor(private formBuilder: FormBuilder) {

    this.frmStepOne = this.formBuilder.group({
      name: ['', Validators.required]
    });
}

子类 HTML

<mat-card>

  <form [formGroup]="frmStepOne">

    <mat-form-field>
      <input matInput formControlName="name" matInput …

我正在尝试使用 observables (rxjs 6.5.1) 在 Angular 9 的顶级组件上加载页面数据。当我单独订阅这些服务时，我可以看到数据返回得很好：

ngOnInit(): void {
  const technicianSubscription = this.techniciansClientService.getByTechnicianId(this.technicianId).subscribe(technician => console.log(technician));
  const technicianReviewsSubscription = this.technicianReviewsClientService.getByTechnicianId(this.technicianId).subscribe(technicianReviews => console.log(technicianReviews));
}

当我尝试使用 forkJoin 时，永远不会返回来自 subscribe 方法的数据：

ngOnInit(): void {
  this.pageDataSubscription = forkJoin({
    technician: this.techniciansClientService.getByTechnicianId(this.technicianId),
    technicianReviews: this.technicianReviewsClientService.getByTechnicianId(this.technicianId),
  }).subscribe(
    // data is never logged here
    data => console.log(data)
  );
}

我尝试过传递 forkJoin 一系列服务调用，也尝试过使用 zip，但无济于事。这里发生了什么事？

我试图在点击分页时调用API。最初，我静态设置了长度，效果很好。我能够进行分页 API 调用。然后我也尝试动态设置长度，它也起作用了，但后来它停止了工作。请帮我指出我的错误。我正在 this.totalEmp 中设置内容的长度，并且也能够在 html 端打印它，但是当我尝试在 mat-paginator 中设置 [length] 时。它对我不起作用。我也尝试在 mat-paginator 中设置 #paginator，但没有看到任何变化。

Below is my implementation



**HTML:**
<mat-paginator 
    [length]="totalEmp"
    [hidden]="normalPagination"
    [pageSize]="2" 
    [pageSizeOptions]="[2]"
    [pageIndex]="pageIndex"
    (page)="pageEvent = getDataByPagination($event)"></mat-paginator>

**.ts file Code**

export class EmpComponent implements OnInit {
 
         dataSource: any;
         totalEmp: number=0;
         normalPagination: boolean;
        
        @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
         @ViewChild(MatSort, { static: true }) sort: MatSort;
        
        ngOnInit() {
            this.getTableContentCount();
          }
        
        
         getTableContentCount() {
            this.myService.CountService().subscribe(
              (response: any) => {
                if (response) {
           
                  this.totalEmp = response;
                  this.getServerData(0,this.totalEmp);
                }
              },
              (error: any) => …

我试图学习，但不清楚。所以有人请给我发送有关Angular 9新功能的宝贵链接或要点吗？

我正在按照Angular 官方更新指南中的步骤进行操作，但是当我尝试查找时遇到了一个不会产生很多结果的问题。

更新完成后，我看到以下输出：

Your project has been updated to Angular version 9!
For more info, please see: https://v9.angular.io/guide/updating-to-version-9

当我运行时ng serve，我得到这个输出：

Schema validation failed with the following errors:
  Data path ".browserTarget" should match pattern "^[^:\s]+:[^:\s]+(:[^\s]+)?$".

在 中angular.json，我的服务配置如下所示：

    "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "My Application:build"
      },

这是我的依赖项和 devDependencies 中的package.json：

"dependencies": {
    "@angular-devkit/build-angular": "~0.900.0-rc.12",
    "@angular-devkit/core": "^9.0.0-rc.12",
    "@angular/animations": "^9.0.0-rc.12",
    "@angular/cdk": "^9.0.0-rc.9",
    "@angular/cli": "^9.0.0-rc.12",
    "@angular/common": "^9.0.0-rc.12",
    "@angular/compiler": "^9.0.0-rc.12",
    "@angular/compiler-cli": "^9.0.0-rc.12",
    "@angular/core": "^9.0.0-rc.12",
    "@angular/flex-layout": "8.0.0-beta.27", …

I had setup a basic project with angular 9 , angular material and angular/flex-layout. How ever I cannot get angular/flex-layout working . Here is what I have done

Login-view.component.ts

<div class="container"  fxLayout="row" fxLayoutAlign="center center" >

  <mat-card class="login-box">
    <mat-card-title>Login</mat-card-title>
    <mat-card-content>
      <form #loginForm="ngForm" (ngSubmit)="login(loginForm)">
        <p>
          <mat-form-field>
            <input type="text" name="username" matInput placeholder="Username" ngModel required />
          </mat-form-field>
        </p>

        <p>
          <mat-form-field>
            <input type="password" name="password" matInput placeholder="Password" ngModel required />
          </mat-form-field>
        </p>
        <div class="button">
          <button type="submit" mat-button>Login</button>
        </div>
      </form>
    </mat-card-content>
  </mat-card>

</div>

login-view.component.scss

mat-form-field{
    width: 100%; …