标签: angular7

我讨厌所有的角度元素都是0x0像素，因为它们具有诸如app-card，app-accordion之类的名称，浏览器无法将其识别为符合HTML5的元素，因此不会提供任何默认样式。

这意味着在Chrome中检查它时，我看不到容器尺寸，并且当DOM真的很深时，很难理解哪个元素包含了屏幕上的哪个区域，等等。

在我看来，所有角度元素默认情况下都应进行块显示，这是合乎逻辑的，因为对于大多数情况而言，这是有道理的。

例如，考虑这些要素

bbs-accordion-header //(width 0px, height 0px)

包含

bbs-accordion-header-regular //(width 1920px, height 153px)

因此，bbs-accordion-header没有任何尺寸，即使它的孩子确实有它们。

我通过手动向每个元素.scss文件添加一行来解决此问题

:host { display: block; }

但是每次手动添加它都是非常繁琐的。有谁知道更好的解决方案？

场景:

• 尝试阅读此博客文章的基本虚拟滚动测试
• 数组有很多项目
• 没有错误
• 列表加载在虚拟滚动中但默认为0的高度

快速修复是为了

• 将cdk-virtual-scroll-viewport的高度设置为500px,或者在app.component.css中设置类"example-viewport"的高度

问题:克服这个零高度的正确方法是什么？

样本在https://stackblitz.com/edit/angular-efdcyc

我是 Angular 的新手，对于序列化添加到 POST 请求的对象的 Date 属性的最佳方法是什么有几个疑问。给定样本类

export class MyClass{
    public dateProperty: Date;
}

我在服务中有以下代码：

public addMyClass(myClass: MyClass): Observable<MyClass> {
    return this.http.post<MyClass>(this.apiBaseUrl, myClass);
}

我必须按以下格式序列化日期'yyyy-MM-dd hh:mm'。我考虑了不同的方法，例如定义装饰器（如果可能）或重写toJson()方法，但我不知道这些是唯一的选择还是有更好的解决方案......

我在屏幕左侧的 mat-list 组件中有一个项目（学生）列表（常规列表）。我的屏幕右侧还有一个教室组件列表。在每个教室组件中，都有一个学生列表。

我希望能够使用角度材料的新拖放 API将学生从常规列表拖动到任何教室组件中包含的学生列表之一

伪代码如下所示：

<mat-list #studentsList="cdkDropList" cdkDropList [cdkDropListData]="students">
  <mat-list-item cdkDrag *ngFor="let student of studentes">
    {{student.name}}
  </mat-list-item>
</mat-list>

<div class="right-panel>
  <app-class-room *ngFor="let cr of classRooms" [classRoom]="cr"></app-class-room>
</div>

显然，我无法使用[cdkDropListConnectedTo]常规列表上的输入，因为我无权访问课堂组件内的学生列表。我应该如何进行？

自 Angular 6 以来，似乎fs 不再起作用了， 我还没有找到检查文件是否存在的替代方法。在我的特殊情况下，我必须检查资产文件夹中是否存在特定的图像文件，例如：

if (fileExists('path')) { doSomething(); }

我尝试安装file-exists 包，但这使用

const fs = require('fs')
const path = require('path')

Angular 7 显然不支持它。

有人可以帮忙吗？多谢。

我的材料表以以下方式显示该值：

名称|数量

芒果|10

    <div class="table-cover center-table">
      <div class="mat-elevation-z8 elevation-scroll-control">
        <table mat-table class="full-width-table left-margin" [dataSource]="dataSource" matSort aria-label="Elements">

          <!-- Name Column -->
          <ng-container matColumnDef="name">
            <td mat-header-cell *matHeaderCellDef >Name</td>
            <td mat-cell *matCellDef="let row" class="">
              <div class="cell-style padding-left">{{row.Name}}</div>
            </td>
          </ng-container>

          <!-- quantity Column -->
          <ng-container matColumnDef="quantity">
            <td mat-header-cell *matHeaderCellDef>quantity</td>
            <td mat-cell *matCellDef="let row">
              <div class="cell-style">{{row.quantity}}</div>
            </td>
          </ng-container>

          <tr mat-header-row *matHeaderRowDef="displayedColumns"> </tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns;"> </tr>
        </table>

      </div>      
    </div>

但我想显示如下所示的值：

名称| 芒果

数量| 10

我怎样才能实现这个目标？任何帮助深表感谢

我有一个用于动态创建表单的 Angular 7 项目。我有一个父 FormGroup，其中包含各种类型的嵌套 FormGroup。

我希望 ParentForm 无效，直到所有嵌套/子表单都有效（实际上希望它们提交但尚未到达）。

  this.parentForm = new FormGroup(this.subforms, { validators: allSubModulesValidValidator }); 

this.subforms 是一个像这样的对象：

interface DynamicKeyFormGroup {
  [key: string]: FormGroup;
}

subforms: DynamicKeyFormGroup = {};

我知道我的验证器是错误的，但我不知道如何为 FormGroup 和 FormControl 设计验证器。

我的想法是，我试图循环遍历所有 this.subForms 的属性（即嵌套的 FormGroups），然后检查它们的状态。如果有无效的，则将parentForm标记为无效。

const allSubModulesValidValidator: ValidatorFn = (control: FormGroup): ValidationErrors | null => {
  const controls = control.controls;
  for (const key in controls) {
    if (controls.hasOwnProperty(key)) {
      if (!(controls[key].status === 'valid')) {
        return { 'allSubModulesValid': true };
      }
    }
  }
  return null;
};

回应评论。删除验证器后，父级有效，而子级无效：

我想使用@HostListener 的捕获阶段。

@HostListener('document:keydown.escape', ['$event']) onKeydownHandler(event: KeyboardEvent) {
    console.log("key pressed");
  }

上面的代码使用默认值（气泡相）。我想使用捕获阶段的情况之一，请帮助我，如何使用@HostListener的捕获阶段。

无法读取 SafeSubscriber._next 处未定义的属性“push”

import { Component, OnInit } from '@angular/core';
import {StudentService} from '../student.service';
import {student} from '../student';


@Component({
  selector: 'app-studentfrm',
  templateUrl: './studentfrm.component.html',
  styleUrls: ['./studentfrm.component.css'],
  providers:[StudentService]
})
export class StudentfrmComponent implements OnInit {


  students: student[];
  student: student;
    name: string;
  birthdate: string;
  gender: string;
  address: string;
  guardianname: string;
  contact: string;
  email: string;
  Areainterested: string;

  constructor(private studentservice: StudentService) { }

  addstudent()
  {
    const newstudent = {
      name: this.name,
      birthdate: this.birthdate,
      gender: this.gender,
      address: this.address,
      guardianname: this.guardianname,
      contact: this.contact,
      email: this.email,
      Areainterested: this. …

我的ASP.NET核心API和Angular Client有问题。我想实现SignalR在API和Angular之间建立连接。cors策略已在我们的客户端和API上激活，因为我们已经可以使用我们的客户端从API检索数据。但是现在的问题是，当我尝试使用SignalR时，收到CORS POLICY错误：

通过CORS策略已阻止从源“ http：// localhost：4200 ” 访问“ http：// localhost：50501 / CoordinatorHub / negotiate ” 处的XMLHttpRequest ：对预检请求的响应未通过访问控制检查：否'访问-Control-Allow-Origin'标头出现在请求的资源上。

但是我们的API上的Startup.cs内部已经有cors政策，就像这样：

在ConfigureServices方法中：

services.AddCors(options =>
{
    options.AddPolicy("AllowSpecificOrigin",
        builder => 
        builder.WithOrigins("http://localhost:4200/")
            .AllowCredentials()
            //.AllowAnyOrigin()
            .AllowAnyMethod()
            .AllowAnyHeader()
            .SetIsOriginAllowedToAllowWildcardSubdomains());
});

在Configure方法中：

app.UseCors("AllowSpecificOrigin");

在我们的客户端中，我们只想尝试在API和客户端之间建立连接，就像这样：

this.hubConnection.start({withCredentials: false}).then(() => 
     this.hubConnection.invoke('send', 'Hello'));