angular5 相关问题

如何在角度中默认选择垫按钮切换

如何设置默认选择切换组中的最后一个按钮。 这是我的代码。 &l...

当我们使用platform-browser-dynamic时，我们还需要platform-browser吗？

在此答案中指出，platform-browser 用于 AOT 编译，而 platform-browser-dynamic 用于 JIT 编译。 我们正在尝试使用 UMD mod 在我们自己的架构中使用 Angular...

有没有办法在 ng-multiselect-dropdown 关闭时添加功能？

我正在 Angular 5 中使用 ng-multiselect-dropdown 包来创建多选下拉列表。 我想在关闭或隐藏下拉组件时调用函数。 像这样 关闭Dropd...

使用 SVG 模板注入动态组件

是否可以注入作为子 svg 元素的动态组件？ 例如，我有一个主要组件 (CanvasComponent) ，它的模板是这样的 是否可以注入作为子 svg 元素的动态组件？ 比如我有一个主组件（CanvasComponent），它的模板是这样的 <svg width="400" height="400"> <ng-template appCanvasAnchor></ng-template> </svg> ng-template 是用于动态注入组件的锚点https://angular.io/guide/dynamic-component-loader 动态（SquareComponent）已经有了这个模板 <svg:rect width="100" height="100" style="fill:red" /> 现在，由于动态组件添加到 DOM 的方式，当我的 Square 组件添加到 DOM 时，它将被包含在 div 元素中，如下所示。 <svg width="400" height="400"> <div app-square> <rect width="100" height="100" style="fill:red" /> </div> </svg> 理论上，一切都工作得很好，除了这是 SVG，因此我的方块不会渲染，因为它有未知的标记（div）。这里的问题是，我可以以某种方式改变注入器使用的元素，以便它不使用 div，而是使用 svg 知道像 g 这样的元素吗？ 不确定模板，但可以在一些解决方法的帮助下通过内容投影动态注入 svg-s。 主要的解决方法是找到一种方法来删除组件的宿主元素，这可以通过创建如下指令来处理，该指令将处理某些元素的“展开”。如下所示，该指令执行类似于 js 中的展开运算符的操作，它获取其所附加的元素的所有子元素并将它们展开到父元素的级别 @Directive({ selector: '[appRemoveHost]', standalone: true, }) export class RemoveHostDirective { constructor(private el: ElementRef) {} //wait for the component to render completely ngOnInit() { var nativeElement: HTMLElement = this.el.nativeElement, parentElement: HTMLElement = nativeElement.parentElement; // move all children out of the element while (nativeElement.firstChild) { parentElement.insertBefore(nativeElement.firstChild, nativeElement); } // remove the empty element(the host) parentElement.removeChild(nativeElement); } } 感谢这个问题和答案删除由角度组件创建的主机 HTML 元素选择器 之后，您只需为要使用的 SVG 元素创建包装器组件即可。 示例画布组件看起来像这样 @Component({ selector: 'app-canvas', template: `<svg width="400" height="400"> <ng-content></ng-content> </svg>`, standalone: true, imports: [CommonModule], }) export class CanvasComponent {} 自定义 SVG 元素可以如下所示 @Component({ selector: 'app-custom-rect,[app-custom-rect]', template: `<svg appRemoveHost> <rect [attr.x]="x" [attr.y]="y" [attr.width]="width" [attr.height]="height" style="{{ style }}" /> </svg>`, standalone: true, imports: [CommonModule, RemoveHostDirective], }) export class CustomRectComponent { @Input() style = ''; @Input() x = ''; @Input() y = ''; @Input() width = ''; @Input() height = ''; } 这里值得一提的是，否则我们需要创建 svg 包装元素 Only void and foreign elements can be self-closed "rect" 作为 rect 元素只能存在于 svg-s 中。 正如此处所示，我们正在使用 appRemoveHost，这要归功于当我们的组件被渲染时， 包装器将被删除。 最后，在我们想要使用画布的地方，我们应该执行以下操作 <app-canvas> <app-custom-rect appRemoveHost [y]="'50'" [x]="'0'" [width]="'100'" [height]="'100'" [style]="'fill:red'" ></app-custom-rect> <app-canvas/> 这里我们再次需要使用 appRemoveHost 指令来删除 rect 组件的剩余包装。 在这里您可以找到工作 Stackblitz 是否可以注入作为子 svg 元素的动态组件？ 是的，当然。 Angular 已经支持这一点好几年了，但我不确定我是否已经看到了这一点的详细记录。 当你创建 Angular 组件时，你的选择器可以是很多东西。它不一定是一个标签。我们将利用这一点来使用属性。 首先，让我们构建托管 SVG 的主要组件： import { Component } from '@angular/core'; @Component({ selector: 'app-main', templateUrl: './main.component.html', styleUrls: ['./main.component.css'], }) export class MainComponent {} 和 HTML： <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <svg:g house></svg:g> </svg> 正如您可能已经猜到的，诀窍就在这里：<svg:g house></svg:g>。我们创建一个组，它不会渲染任何内容。但我们给它添加了一个属性house。 然后要在那里“注入”组件，我们可以让组件选择器以带有组的 svg 标签和 house 属性为目标： import { Component } from '@angular/core'; @Component({ selector: 'svg:g[house]', templateUrl: './house.component.html', styleUrls: ['./house.component.css'], }) export class HouseComponent {} 最后一块拼图几乎就是 SVG：要注入的部分 <svg:polygon points="25,10 40,30 10,30" style="fill:rgb(0,0,255);" /> <svg:rect width="30" height="30" x="10" y="30" style="fill:rgb(0,0,255);" /> 如果我们查看渲染的 HTML： <app-main _ngcontent-rcx-c227="" _nghost-rcx-c226="" ><svg _ngcontent-rcx-c226="" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" > <g _ngcontent-rcx-c226="" house="" _nghost-rcx-c217=""> <polygon _ngcontent-rcx-c217="" points="25,10 40,30 10,30" style="fill: rgb(0,0,255);" ></polygon> <rect _ngcontent-rcx-c217="" width="30" height="30" x="10" y="30" style="fill: rgb(0,0,255);" ></rect> </g></svg ></app-main> 没有我们内部组件的任何痕迹。当然，您可以根据需要拥有任意数量和嵌套的数量。您还可以通过将数据作为输入传递来参数化它们，就像使用任何其他组件或注入服务一样。 这是 Stackblitz 上的 现场演示。 jscw 使用本机 JavaScript Web 组件可能会更容易 <svg-floorplan> 处理其innerHTML 并在shadowDOM中生成<SVG> 基于 HTMLUnknownElements <room>（打造出色的语义 HTML） 它声明了正确的 SVG 的 x,y,width,height,fill 属性 <rect> 基于 <rect> 标签可以定位在中间 innerHTML 中任何剩余的 SVG 元素都被移动到新的<SVG> 您的 JavaScript 技能可以增加更多... <svg-floorplan viewBox="0 0 300 100"> <style>text{fill:gold}</style> <room rect="0 0 200 50">living</room> <room rect="200 0 100 100 blue">kitchen</room> <room rect="0 50 100 50">bedroom</room> <room rect="100 50 100 50 green">bathroom</room> <circle fill="red" cx="25" cy="25" r="10"></circle> </svg-floorplan> 创造： <svg-floorplan viewBox="0 0 300 100"> <style>text{fill:gold}</style> <room rect="0 0 200 50">living</room> <room rect="200 0 100 100 blue">kitchen</room> <room rect="0 50 100 50">bedroom</room> <room rect="100 50 100 50 green">bathroom</room> <circle fill="red" cx="25" cy="25" r="10"></circle> </svg-floorplan> <script> customElements.define("svg-floorplan", class extends HTMLElement { connectedCallback() { setTimeout(() => { // make sure innerHTML is parsed let svg = `<svg viewBox="${this.getAttribute("viewBox")}">`; svg += `<rect x="0" y="0" width="100%" height="100%" fill="grey"/>`; this.querySelectorAll('room[rect]').forEach(rm => { let [x, y, width, height, fill="grey"] = rm.getAttribute("rect").split(" "); svg += `<rect x="${x}" y="${y}" width="${width}" height="${height}" stroke="black" fill="${fill}"/>`; let label = rm.innerHTML; svg += `<path id="${label}" pathLength="100" d="M${x} ${~~y+height/2}h${width}" stroke="none"></path> <text><textPath href="#${label}" startoffset="50" dominant-baseline="middle" text-anchor="middle">${label}</textPath></text>`; rm.remove(); }); svg += `</svg>`; this.attachShadow({mode:"open"}).innerHTML = svg; this.shadowRoot.querySelector("svg") .insertAdjacentHTML("beforeend",this.innerHTML) }) } }) </script> 文档可能会帮助您： 您可以在 Angular 应用程序中使用 SVG 文件作为模板。当您使用 SVG 作为模板时，您可以像使用 HTML 模板一样使用指令和绑定。使用这些功能动态生成交互式图形。 我建议你创建一个可以以 Angular 方式控制的 SVG 组件，对于动态模板显示，你可以做的是： <div class="container" *appCanvasAnchor> </div> .container { width: 400px; height: 400px; svg { width: 100%; height: 100%; } }

如何仅重置 Angular 5 中表单的特定字段

我在我的组件文件之一中创建了一个函数来重置表单（myform）： `onSubmit() { 如果（this.myform.valid）{ console.log("表单已提交！"); this.myform.reset(); } }` 它...

如何在 Angular 材质的 Snackbar 上添加 html 内容？

我已经创建了烤面包机（snackbar）来响应消息。 我想在烤面包机（snackbar）上添加 html 内容，以便可以以正确的格式显示多条消息。 我努力了 变量测试=' 我已经创建了烤面包机（snackbar）来响应消息。 我想在烤面包机（snackbar）上添加一个html内容，以便可以以正确的格式显示多条消息。 我已经尝试过 var test ='<html> <body>' + '<h1>The Header</h1>' + '<p>The paragraph of text</p>' + '</body> </html>'; this._toastr.error(test); _toastr : is my service. .error : is my function in which I have to pass htmlContent 我的代码 var test = '<html> <body>' + '<h1>The Header</h1>' + '<p>The paragraph of text</p>' + '</body> </html>'; this._toastr.error(test); 输出应该是：- 以下 xxx/ xxx 的价格已输入 2018 年 11 月 27 日的价格。 世界你好！ 大家好！ 我想把这个东西放进烤面包机（小吃店） 您将无法像 Edric 在他的评论/链接中提到的那样创建自定义 SnackBar 组件。标准 Angular Material SnackBars 仅允许您设置 message 和 action（以及一些配置选项）。 检查 this stackblitz 是否有一个非常基本的 SnackBar 组件，该组件从传递给它的 data 读取 HTML 字符串，并将字符串内容在小吃栏中呈现为 HTML。 snackbar.component.ts export class SnackbarComponent { constructor(@Inject(MAT_SNACK_BAR_DATA) public data: any, public snackBar: MatSnackBar) { } } snackbar.component.html <div [innerHTML]="data.html"></div> <button mat-raised-button (click)="snackBar.dismiss()">Dismiss</button> 像这样使用组件： openSnackbar() { this.snackBar.openFromComponent(SnackbarComponent, { data: { html: '<h1>The Header</h1><p>The paragraph of text</p>' } }); } 如果您需要的话，您可以轻松地将其包装在服务中。 像这样使用组件： openSnackbar() { this.snackBar.openFromComponent(SnackbarComponent, { data: {html: '<h1>The Header</h1><p>The paragraph of text</p>'}, **duration: 20000, verticalPosition: 'bottom', panelClass: ['error-snackbar']** }); }

如何使用 Angular 5 中的批量写入从 Cloud Firestore 删除多个文档

如 firebase cloud firestore 批量写入中所引用： 如果您不需要阅读操作集中的任何文档，您可以 可以作为单个批处理执行多个写入操作，其中包含...

如何在 Angular 中循环进行可取消的 api 调用？

我有一个包含参数的列表，例如： [ {a:1a,b:1b,c:1c}, {a:2a,b:2b,c:2c}, {a:3a,b:3b,c:3c} ] 对于每个参数对象，我的目标是发起三个连续的 API 调用，每个调用都带有

Angular 5 - 指令中的生命周期挂钩

我是 Angular 5 的新手。 我已经为外部 JS 库创建了指令。 但在同一个指令中，我将值绑定到属性。 我正在尝试起诉 ngAfterViewInit 来检测是否...

npm uninstall 会从 package.json 中删除包，但不会从 node_modules 文件夹中删除它

我尝试使用以下方法删除包 npm uninstall (包名) -s 它从 package.json 中删除了包，但没有从 node_modules 文件夹中删除它，那么我如何删除这些未使用的

Angular 5：通过求和值验证多个输入字段

我想通过总结多个数字输入字段的值来验证它们，并为 Angular 创建一个自定义验证器。 每个输入看起来像这样： ...

如何使用角度材料表添加多个标题行

参数1：时间段 {{元素.值}} 参数2：性别 {{元素.性别}} 参数1：时间段 {{元素.值}} 参数2：性别 {{元素.性别}} <ng-container matColumnDef="column3"> <mat-header-cell *matHeaderCellDef rowspan="2"> Patients with Base Condition </mat-header-cell> <mat-cell *matCellDef="let element"> {{element.value}} </mat-cell> </ng-container> <ng-container matColumnDef="column4"> <mat-header-cell *matHeaderCellDef> Patients with Outcome</mat-header-cell> <mat-cell *matCellDef="let element"> {{element.value}} </mat-cell> </ng-container> <ng-container matColumnDef="column5"> <mat-header-cell *matHeaderCellDef class="ColumnDivider"> Prevelance </mat-header-cell> <mat-cell *matCellDef="let element" class="ColumnDivider"> {{element.value}} </mat-cell> </ng-container> <ng-container matColumnDef="column6"> <mat-header-cell *matHeaderCellDef> Patients at Risk </mat-header-cell> <mat-cell *matCellDef="let element"> {{element.value}} </mat-cell> </ng-container> <ng-container matColumnDef="column7"> <mat-header-cell *matHeaderCellDef> New Patients with Outcome </mat-header-cell> <mat-cell *matCellDef="let element"> {{element.value}} </mat-cell> </ng-container> <ng-container matColumnDef="column8"> <mat-header-cell *matHeaderCellDef class="ColumnDivider"> Incidence Proportion </mat-header-cell> <mat-cell *matCellDef="let element" class="ColumnDivider"> {{element.value}} </mat-cell> </ng-container> <ng-container matColumnDef="column8"> <mat-header-cell *matHeaderCellDef> Total Patient Years at Risk </mat-header-cell> <mat-cell *matCellDef="let element"> {{element.value}} </mat-cell> </ng-container> <ng-container matColumnDef="column10"> <mat-header-cell *matHeaderCellDef class="myMarginLeft"> New Patients with Outcome </mat-header-cell> <mat-cell *matCellDef="let element" class="myMarginLeft"> {{element.value}} </mat-cell> </ng-container> <ng-container matColumnDef="column11"> <mat-header-cell *matHeaderCellDef >Incidence Rate </mat-header-cell> <mat-cell *matCellDef="let element"> {{element.value}} </mat-cell> </ng-container> <ng-container *matHeaderRowDef="displayedColumns"> <div class="mat-header-row header-group-row"> <div class="mat-header-cell" role="columnheader"></div> <div class="mat-header-cell" role="columnheader"></div> </div> <mat-header-row></mat-header-row> </ng-container> <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="getRecord(row)" [ngClass]="{'highlight': selectedRowIndex == row.inp_analysis_name}"></mat-row> 单列多列。 列 1|列 2|列 3|列 4|列 5|列 6|列 7|列 8 Column2.1|Column2.2|Column2.3 Column6.1|Column6.2 使用 colspan 重新创建多个标题行和单元格分组的示例。 https://stackblitz.com/edit/angular-bklajw?file=app%2Ftable-basic-example.html 官方解决方案对我来说没有用，因为我需要辅助标题行来跨越所有列（这样我可以使用内容投影来使用单独的组件） 我的解决方案是创建一个从 CdkHeaderRow 扩展的SecondaryHeaderComponent： @Component({ selector: 'mat-secondary-header-row', standalone: true, template: `<ng-content></ng-content>` }) export class SecondaryHeaderComponent extends CdkHeaderRow {} 然后可以像这样使用（例如在 mat-header-row 元素下面）： <mat-secondary-header-row *matHeaderRowDef="[]; sticky: true"> <p>2nd header row content!</p> </mat-secondary-header-row> 我遇到的一个怪癖是表格内容在（粘性）辅助标题行下方仍然可见。

Keycloak 重定向到页面刷新时登录

我在我的 Angular 5 应用程序中使用 keycloak JavaScript 适配器，虽然我的登录和重定向有效，但问题是每当我刷新我的 ng 应用程序时，它都会再次要求 keycloak 登录，尽管我...

当项目中有多个应用程序时，使用 AngularCLI 生成组件

我的 .angular-cli.json 文件如下所示： { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", “项目”： { “名称”：“suman-chrome-扩展” }, “应用”： [ { “r...

尝试访问重新加载或刷新或角度 5 中的新选项卡中的一个时接收 AccessDenied

有一段时间，我只是将网站的内容存储在 s3 存储桶中，并且可以通过完整的 url 访问所有页面。我想通过添加 SSL 来使我的网站更安全，所以我创建...

垫子选择面板最小宽度

我正在尝试使用多个复选框自定义垫选择。 由于某种原因，面板的最小宽度错误，如下所示： 我不知道它在哪里计算这个最小宽度。 我也尝试添加

如何更改（升级或降级）Angular 版本？

我最近安装了 Angular 6，想重新使用 Angular 5.2 如何将我的 Angular 版本从我拥有的任何版本更改为我选择的版本？

如何在角度材质下拉角度5中实现全选

我正在使用 mat-select 来显示下拉列表，我需要选择角度下拉列表中的所有功能。 下面是我的html 我正在使用 mat-select 来显示下拉列表，我需要选择角度下拉列表中的所有功能。 下面是我的html <mat-select formControlName="myControl" multiple (ngModelChange)="resetSelect($event, 'myControl')"> <mat-option>Select All</mat-option> <mat-option [value]="1">Option 1</mat-option> <mat-option [value]="2">Option 2</mat-option> <mat-option [value]="3">Option 3</mat-option> </mat-select> 这是我的ts代码 /** * click handler that resets a multiple select * @param {Array} $event current value of the field * @param {string} field name of the formControl in the formGroup */ protected resetSelect($event: string[], field: string) { // when resetting the value, this method gets called again, so stop recursion if we have no values if ($event.length === 0) { return; } // first option (with no value) has been clicked if ($event[0] === undefined) { // reset the formControl value this.myFormGroup.get(field).setValue([]); } } 有些它无法正常工作，请帮助或让我有更好的方法来做到这一点。 使用点击事件试试这个 <mat-form-field> <mat-select placeholder="Toppings" [formControl]="toppings" multiple> <mat-option [value]="1" (click)="selectAll(ev)" #ev >SelectAll</mat-option> <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option> </mat-select> </mat-form-field> } 打字稿： selectAll(ev) { if(ev._selected) { this.toppings.setValue(['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato']); ev._selected=true; } if(ev._selected==false) { this.toppings.setValue([]); } } 示例：https://stackblitz.com/edit/angular-czmxfp 我扩展了 Angular Material 的 MatSelect 以包含以下功能： 搜索 分组 全选 选择组下的所有选项 工作示例可以在 StackBlitz 上找到，完整的存储库可以在 GitHub 上找到 以下是“全选”实现的代码片段 HTML <button *ngIf="isGroup && values.length" mat-icon-button (click)="toggleGroup()"> <mat-icon> {{ isCollapsed ? 'chevron_right' : 'expand_more' }} </mat-icon> </button> <ng-container *ngIf="values.length" [ngSwitch]="isMultiple"> <mat-checkbox *ngSwitchCase="true" disableRipple matRipple class="mat-option" color="primary" [ngClass]="{ 'mat-selected': isIndeterminate() || isChecked() }" [indeterminate]="isIndeterminate()" [checked]="isChecked()" (click)="$event.stopPropagation()" (change)="toggleSelection($event)"> {{text}} </mat-checkbox> <span *ngSwitchDefault> {{text}} </span> </ng-container> TS import { Component, Input, ViewEncapsulation, OnChanges, SimpleChanges, ChangeDetectionStrategy, ChangeDetectorRef, OnInit, OnDestroy } from '@angular/core'; import { FormControl } from '@angular/forms'; import { MatCheckboxChange } from '@angular/material'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; @Component({ // tslint:disable-next-line:component-selector selector: 'mat-select-check', templateUrl: './mat-select-check.component.html', styleUrls: ['./mat-select-check.component.css'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }) export class MatSelectCheckComponent implements OnChanges, OnInit, OnDestroy { @Input() selectControl: FormControl; @Input() values = []; @Input() text = 'Select All'; @Input() isGroup = false; @Input() groupData: any; @Input() dataKey = 'Key'; @Input() isMultiple?: boolean; private _onDestroy = new Subject<void>(); isCollapsed = false; constructor(private changeDetectorRef: ChangeDetectorRef) { } ngOnChanges(changes: SimpleChanges) { if (changes && changes.values && changes.values.currentValue && changes.values.currentValue.length) { this.values = changes.values.currentValue.map(z => z[this.dataKey]); } setTimeout(() => { this.changeDetectorRef.detectChanges(); }); } ngOnInit() { if (this.selectControl) { this.selectControl.valueChanges .pipe(takeUntil(this._onDestroy)) .subscribe(value => setTimeout(() => { this.changeDetectorRef.detectChanges(); })); } } ngOnDestroy() { this._onDestroy.next(); this._onDestroy.complete(); } isChecked(): boolean { const hasValues = this.selectControl.value && this.values.length && this.selectControl.value.length; if (hasValues) { const length = this.selectControl.value.filter(x => this.values.includes(x)).length; return length > 0 && length === this.values.length; } return false; } isIndeterminate(): boolean { const hasValues = this.selectControl.value && this.values.length && this.selectControl.value.length; if (hasValues) { const length = this.selectControl.value.filter(x => this.values.includes(x)).length; return length > 0 && length < this.values.length; } return false; } toggleSelection(change: MatCheckboxChange): void { if (change.checked) { const newValue = this.selectControl.value ? [...this.selectControl.value, ...this.values] : [...this.values]; this.selectControl.setValue(Array.from(new Set(newValue))); } else { this.selectControl.setValue(this.selectControl.value.filter(x => !this.values.includes(x))); } } toggleGroup() { this.isCollapsed = !this.isCollapsed; this.groupData[this.groupData.findIndex(x => x.key === this.text)].isVisible = !this.isCollapsed; } } 这是如何扩展材质选项组件的示例。 参见 stackblitz 演示以及使用示例 组件： import { ChangeDetectorRef, Component, ElementRef, HostListener, HostBinding, Inject, Input, OnDestroy, OnInit, Optional } from '@angular/core'; import { MAT_OPTION_PARENT_COMPONENT, MatOptgroup, MatOption, MatOptionParentComponent } from '@angular/material/core'; import { AbstractControl } from '@angular/forms'; import { MatPseudoCheckboxState } from '@angular/material/core/selection/pseudo-checkbox/pseudo-checkbox'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; @Component({ selector: 'app-select-all-option', templateUrl: './select-all-option.component.html', styleUrls: ['./select-all-option.component.css'] }) export class SelectAllOptionComponent extends MatOption implements OnInit, OnDestroy { protected unsubscribe: Subject<any>; @Input() control: AbstractControl; @Input() title: string; @Input() values: any[] = []; @HostBinding('class') cssClass = 'mat-option'; @HostListener('click') toggleSelection(): void { this. _selectViaInteraction(); this.control.setValue(this.selected ? this.values : []); } constructor(elementRef: ElementRef<HTMLElement>, changeDetectorRef: ChangeDetectorRef, @Optional() @Inject(MAT_OPTION_PARENT_COMPONENT) parent: MatOptionParentComponent, @Optional() group: MatOptgroup) { super(elementRef, changeDetectorRef, parent, group); this.title = 'Select All'; } ngOnInit(): void { this.unsubscribe = new Subject<any>(); this.refresh(); this.control.valueChanges .pipe(takeUntil(this.unsubscribe)) .subscribe(() => { this.refresh(); }); } ngOnDestroy(): void { super.ngOnDestroy(); this.unsubscribe.next(); this.unsubscribe.complete(); } get selectedItemsCount(): number { return this.control && Array.isArray(this.control.value) ? this.control.value.filter(el => el !== null).length : 0; } get selectedAll(): boolean { return this.selectedItemsCount === this.values.length; } get selectedPartially(): boolean { const selectedItemsCount = this.selectedItemsCount; return selectedItemsCount > 0 && selectedItemsCount < this.values.length; } get checkboxState(): MatPseudoCheckboxState { let state: MatPseudoCheckboxState = 'unchecked'; if (this.selectedAll) { state = 'checked'; } else if (this.selectedPartially) { state = 'indeterminate'; } return state; } refresh(): void { if (this.selectedItemsCount > 0) { this.select(); } else { this.deselect(); } } } HTML： <mat-pseudo-checkbox class="mat-option-pseudo-checkbox" [state]="checkboxState" [disabled]="disabled" [ngClass]="selected ? 'bg-accent': ''"> </mat-pseudo-checkbox> <span class="mat-option-text"> {{title}} </span> <div class="mat-option-ripple" mat-ripple [matRippleTrigger]="_getHostElement()" [matRippleDisabled]="disabled || disableRipple"> </div> CSS： .bg-accent { background-color: #2196f3 !important; } 发表了一篇关于它的文章：https://angular-material.dev/articles/mat-select-all

Angular 5 - 使用管道清理 HTML

当我收到警告时： “警告：清理 HTML 会删除一些内容” 我做了一些研究，看到人们使用下面的管道或类似于下面的管道 导入 { 管道，

如何使用 Angular HttpClient 进行基本授权并连接 API 请求？

我尝试连接具有基本授权的 API，但服务器不允许我访问它返回 401（未经授权）。我的代码是： 获取 API() { console.log('这里我在 get 方法中