标签: angular7

我有一个带有 FormArray 的 FormGroup 和一个显示数组的 mat-table。当我向 FormArray 添加新的 FormGroup 时，mat-table 不会添加新行。

我试图给 trackBy 做广告，但我不知道在哪里（老实说，也不知道为什么）。

组件.html：

<form [formGroup]="formGroup">
    <div formArrayName="items">
        <button mat-raised-button (click)="addNew()">New Case</button>

        <table mat-table [dataSource]="items.controls">
            <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
            <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>

            <ng-container matColumnDef="itemKey">
                <mat-header-cell *matHeaderCellDef> Key </mat-header-cell>
                <mat-cell *matCellDef="let item; let i = index" [formGroupName]="i">
                    <mat-form-field> 
                        <input formControlName="itemKey" matInput />
                    </mat-form-field>
                </mat-cell>
            </ng-container>

和 component.ts：

formGroup = new FormGroup({
   items: new FormArray()
});

get items() { return this.formGroup.get("items") as FormArray }


addNew() {
  this.items.push(new FormGroup({
    itemKey: new FormControl(), …

在这里，我想在同一个父级的两个组件之间进行通信。基本上，我想将数据从一个组件传递到另一个组件。

第一个组件.ts

constructor(
    private service: service1,
    private serve: service2,
) {}

ngOnInit() {
    this.service.getUser().subscribe((data) => {
        this.serve.setAccount("1", "apple");
        this.serve.setEnvironment("Happy"); 
    })
}

第二组件.ts

constructor(private usingService : service2) { }

 ngOnInit() {
 this.Account = this.serve.getAccount();
 this.environmentDetails = this.serve.getEnvironment();

 }

我需要从 firstComponent 检索数据到 second.here 第一个组件在第二个组件之后加载。soo，第一个组件设置的数据稍后在图片中。

尝试使用 rxjs.but 的主题，我们如何在这个例子的 firstComponent.ts 中使用主题？

我如何在这两个组件之间进行通信，因为它们是彼此的兄弟姐妹？请帮忙

我有一个 angular 7 应用程序。我正在向我的服务器发送日期。但是由于时区的原因，我的时间要回到服务器 3 小时。我了解到解决这个问题的唯一方法是编写 Date.prototype.toJSON. 但是，我不知道 angular，我应该在哪里写下面的代码以及如何写？（例如 index.html、app.module.ts、...）我在下面写了我的 stackblitz 示例。

Date.prototype.toJSON = function(key){
    //This code return me as string like "25.02.0219 19:48:52"
    return this.toLocaleDateString() + ' ' + this.toLocaleTimeString();
}

闪电战

我正在尝试编写一个基本的 ngrx 效果测试。但是我不断收到错误，因为 TypeError: expect(...).toBeObservable is not a function。

这是一个使用 Angular 7 的新项目设置。我以前在 angular 4 中运行的项目没有问题。

最初认为这可能与软件包有关，因此将所有软件包升级到最新，但还没有运气。

我试图测试一个非常简单的 observable，如 expect(effects.test$).toBeObservable(5); 但它给出了同样的错误。正如标题中提到的，我使用的是 jasmine-marbles，版本是 0.4.1。

我的 VSCode 编辑器在保存或格式化文档时自动将导入语句包装到新行中：

前：

后：

我不想要这种行为。如何禁用此规则？

我正在使用 Angular 7 打字稿进行编程，并在其上安装了以下扩展：

1. 角度要点
2. 更漂亮
3. 特林特

请帮助我删除此规则或行为。

谢谢你。

我想知道每当在父 div #menu 内触发点击时，其中存在无关的 html 标签。

nativeElement.parent 对我不起作用。

HTML代码：

<button #toggleButton (click)="toggleMenu()"> Toggle Menu</button>

 <div class="menu" *ngIf="isMenuOpen" #menu>
    <div>
      I'm the menu. Click outside to close me
    </div>
    </div>

角脚本：

this.renderer.listen('window', 'click',(e:Event)=>{

        if(e.target !== this.toggleButton.nativeElement && e.target!==this.menu.nativeElement){
            this.isMenuOpen=false;
        }
    });

这是行不通的。

在我们的团队中，我们开发了一个 angular7 应用程序并托管在 azure 中。当 url 类似于http://xyz.azurewebsites.net/时，无论是否刷新，网站都可以正常工作。我可以通过单击链接来遍历页面，没有任何问题。例如，可以遍历像http://xyz.azurewebsites.net/page1这样的页面，但是这次当我在浏览器中刷新/按 ctrl f5 时它显示：您正在寻找的资源已被删除，有其名称已更改，或暂时不可用。

我用谷歌搜索并尝试了一些解决方法，如下所示：

1. 为url重写创建了一个web.config文件并将其放在angular应用程序的src文件夹中，在其中添加了web.config

"assets": [ "src/favicon.ico", "src/assets", "src/web.config" ],

在 angular.json 文件中，但以静脉结尾。

2. 为url重写创建了一个web.config文件并将其放置在angular应用程序的根目录中，将web.config添加到

"assets": [ "src/favicon.ico", "src/assets", "web.config" ],

在 angular.json 文件中，但以静脉结尾。

3. 尝试将 web.config 放置/不放置在 dist（在使用 ng build --prod 命令创建 dist 之后）文件夹中，但以静脉结束。

4. 在 web.config 中尝试了两种不同的内容，如下所示：

   第一的：

   <?xml version="1.0"?>
   
   <configuration>
       <system.webServer>
           <staticContent>
               <mimeMap fileExtension=".json" mimeType="application/json" />
               <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
               <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
           </staticContent>
       </system.webServer>
       <system.webServer>
       <rewrite>
           <rules>
               <rule name="angular cli routes" stopProcessing="true">
                   <match url=".*" />
                   <conditions …

   Run Code Online (Sandbox Code Playgroud)

我正在尝试使用来自远程 API 服务的值填充材料选择下拉列表。我一直在组件上得到一个空值或未定义的值。

这是使用 MEAN 堆栈和 Angular Material 的 Angular 7。我试过 compareWith 函数并记录值。我注意到该组件总是首先加载其值为空的值，然后是具有值的 API 服务。

<mat-form-field>
    <mat-select formControlName="company"  placeholder="Select 
Company" [(value)]="selectedCompany" [compareWith]="compareFn">
        <mat-option *ngFor="let lC of loadedCompanies" 
 [value]="lC.id">
          {{lC.name}}
        </mat-option>
    </mat-select>
</mat-form-field>

ngOnInit() {
  this.authStatusSub = this.authService
  .getAuthStatusListener()
  .subscribe(authStatus => {
      this.isLoading = false;
  });

  this.form = new FormGroup({
      id: new FormControl(null),
      company: new FormControl(this.loadedCompanies)
  });

  this.companyService.getCompanyList();
  this.companySub = this.companyService
  .getcompanyUpdateListener()
  .subscribe((companyData: {companies: Company[]}) => {
    this.isLoading = false;
    this.loadedCompanies =  companyData.companies;
  });
}

compareFn(c1: Company, c2: Company): boolean { …

在我的用例中，当用户单击编辑按钮时，Angular 对后端进行 HTTP 调用并检索对象，然后在 EDIT 表单上填充这些值。用户可以更新或保持字段不变。当单击update按钮时，Angular 应该获取表单中存在的所有这些值并将它们发送到后端。所以，这是问题所在，在将值加载到编辑页面表单并更新某些字段并保留某些字段不变后，未修改的值会变为空。这真的很奇怪

产品-edit.component.html

<div *ngIf="productDataAvailable()">
  <h2>Update Product</h2>
  <br/>
  <form [formGroup]="productForm">
    <div class="form-group">
      <label for="id">Product Id</label>
      <input class="form-control" formControlName="id" id="id" type="text" value="{{product.id}}">

      <small class="form-text text-muted" id="emailHelp"></small>
    </div>
    <div class="form-group">
      <label for="name">Name</label>
      <input class="form-control" formControlName="name" id="name" type="text" value="{{product.name}}">
    </div>
    <div class="form-group">
      <label for="description">Description</label>
      <input class="form-control" formControlName="description" height="100" id="description" required type="text"
             [value]="product.description" width="200">
    </div>
    <div class="form-group">
      <label for="currency">Price</label> <br/>
      <label>
        <select (load)="loadCurrencies()" class="form-control"  [value]="product.price.currency.symbol" formControlName="currency" id="currency" name="currency">
          <option *ngFor="let currency of currencies" value={{currency.id}}>
            {{currency.name}}
          </option>
        </select> …

我正在尝试将 Angular 的材料表集成到一个新项目中，但由于某种原因数据没有显示，只有空行。我在另一个项目中使用了相同的逻辑并且它起作用了，我花了很多时间来寻找原因，但没有任何效果。

我需要在一个名为“ cores ”的延迟加载模块中添加该表，并导入了材料表模块：

import { MatTableModule } from '@angular/material';
imports: [
    CommonModule,
    CoresRoutingModule,
    MatTableModule
  ]

我创建了一个返回“ICore”对象数组的服务：

getCores(): Observable<ICore[]> {
    return this.http.get<ICore[]>('/cores');
  }

该ICORE接口：

export interface ICore {
  id: number;
  name: string;
}

我的“ index.component.html ”文件中的HTML ：

<mat-table [dataSource]="dataSource">
  <ng-container matColumnDef="id">
    <mat-header-cell *matHeaderCellDef> Id </mat-header-cell>
    <mat-cell *matCellDef="let core"> {{ core.id }}</mat-cell>
  </ng-container>
  <ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
    <mat-cell *matCellDef="let core"> {{ core.name }}</mat-cell>
  </ng-container>
  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

“index.components.ts”文件中的逻辑：

dataSource = …