小编mal*_*awi的帖子

我已将 npm 升级到最新版本。我的 Visual Studio 应用程序中的 npm 文件夹读取 v6.0.3，而我的 package.json 文件也对应于此版本 6.0.3。

但是每当我运行我的应用程序时，我都会收到错误“无法在浏览器上找到模块”

我相信 HttpClient 在 3x 以上的版本中使用，但显然安装了更高的版本。

应用程序模块.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';

import { AppComponent } from './components/app/app.component';
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
import { CounterComponent } from './components/counter/counter.component';
import …

我有这个简单的表单并用于创建和更新案例，因此对于创建案例，用户将输入数据并基于验证器我将获得form.valid（真，假）。在更新的情况下，我只是从 api 获取数据并将此值设置为表单并使表单禁用；

this.form = fb.group({
  name: ['', Validators.required],
  lastName: ['', Validators.required],
  address: [''],
});

因此，当我禁用表单时，有效值始终为false；

 ngOnInit() {
    this.form.patchValue({
      name: 'name',
      lastName: 'Last Name'
    });

    this.form.disable();
  }

堆叠闪电战示例

父类

import { BadRequestError } from './../common/bad-request-error';
import { NotFoundError } from './../common/not-found-error';
import { AppError } from './../common/app-error';
import { Http } from '@angular/http';
import { Injectable, OnInit } from '@angular/core';
import { catchError } from 'rxjs/operators';
import { throwError} from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor(private url: string , private http: Http) {
 }

getAll() {
 return this.http.get(this.url).pipe(catchError(this.handleError));
}

delete(id) {
  return this.http.delete(this.url + '/' + id)
   .pipe(
    catchError(this.handleError));
 }

update(resource) {
  return this.http.patch(this.url …

使用Blob功能下载任何文件类型

private saveAsBlob(data: any) {
 const blob = new Blob([data._body],
 const file = new File([blob], 'image.png',
 FileSaver.saveAs(file);
}

我有一个接口定义为:

export interface Address {
    addressType: {
        house?: {
            streetAddress: string,
            city: string,
            zip: string,
        },
        apartment?: {
            streetAddress: "",
            unitNumber: "",
            city: "",
            zip: "",
            buildingName?: "",
        },
    }
    instructions?: string;
}

然后在我的组件的Typescript文件中,我定义了一个房屋地址:

address: Address;

constructor() {

    this.address.addressType = {
      house: {
        streetAddress: "1 test",
        city: "test city",
        zip: "92222",
      }
    }        
    console.log(this.address);
}

虽然当我将地址记录到控制台时,我得到:

Uncaught (in promise): TypeError: Cannot set property 'addressType' of undefined

我以为我在构造函数中设置了addressType.有没有更有效的方法来做我正在做的事情？

我在primeng组件中看到对某些属性使用类似ngModel（双向数据绑定）样式的东西

[(selection)]="selectedItem";

看起来像

@Input() selection;
@Output() selection:EventEmitter<any> = new EventEmitter<any>();

我如何实现这样的东西，并且有可能做更多的事情而不是像

 <component-a  [(selection)]="selectedItem"  [(data)]="selectedData"></component-a>

有一个组件：

<my-component></my-component>

它的组件接收一串数字作为@Input

<my-component [data]="numbers$ | async"></my-component>

在组件内部我们更新模型：

@Component({...})
class MyComponent {

  numbers: number[] = [];

  @Input
  set data(numbers: number[]) {
      this.numbers = numbers;
  }

  constructor() {}

  myCallback() { }
}

然后渲染数字列表，如下所示：

<ul>
 <li *ngFor="number of numbers">{{number}}</li>
</ul>

如何检测已经*ngFor渲染了所有元素？myCallback元素添加到 DOM 后如何调用回调函数？

我尝试忽略 node_modules 但仍然对我不起作用，即使在忽略 node_modules 之后我仍然面临同样的错误

yaml文件：

version: '3.5'

services:
    angular-docker:
        hostname: localhost
        container_name: angular-docker
        build: ./angular-doc
        volumes:
          - './angular-doc:/usr/src/app/'
        ports:
          - '4200:4200'

泊坞窗文件：

FROM node:10.12.0

RUN mkdir usr/src/app

WORKDIR /usr/src/app

COPY package*.json ./

RUN npm install -g @angular/cli@latest

COPY . .

EXPOSE 4200

CMD ng serve --host 0.0.0.0

使用 Angular 7 和 Typescript：我有一个使用大量服务和子类（大约 40 个子类）的基类，我不想在所有子类构造函数中添加这些服务并将它们传递给super()但我仍然需要在所有子类中使用这些服务。

export class parentTool {

    constructor(type: string, public service1: Service1, public service2: Service2,public service3: Service3, public service4: Service4){}
}

export class ChildTool1 extends parentTool {

    constructor(public service1: Service1, public service2: Service2,public service3: Service3, public service4: Service4) {

        super("tool1", service1, service2, service3, service4);
    }
}

export class ChildTool2 extends parentTool {

    constructor(public service1: Service1, public service2: Service2,public service3: Service3, public service4: Service4) {

        super("tool2", service1, service2, service3, service4);
    }
}

我有一个表，其中数据正在填充。每行都有一个编辑链接。我只想在单击编辑链接时编辑特定行。现在它的'显示所有行的编辑选项。

我还想在单击编辑时在输入框中显示文本。

这是我的代码。

<tr *ngFor="let row of backendData.report"  class="hover-highlight">

          <td class="benchmark_name">
             {{row.name}}
          </td>
          <td>
            {{row.value}}
          </td>
          <td>
            {{row.description}}
          </td>
          <td>
              <button *ngIf="enableEdit" (click)="enableEdit=false" class="btn page-secondary-action-btn" ng-click="cancel()">Cancel</button>
              <button *ngIf="enableEdit" id="saveBtn" class="btn page-primary-action-btn" (click)="saveSegment()" type="submit">Save</button>
              <a class="table-row-action edit-action" *ngIf="!enableEdit" (click)="enableEdit = true">
          <i class="fa fa-pencil" uib-tooltip="Edit" tooltip-trigger="mouseenter" tooltip-append-to-body="true" tooltip-placement="left"></i>
        </a>
          </td>
          <td>

          </td>
        </tr>

我当前的输出看起来像这样