angular5 相关问题

关于Angular版本5的问题，来自Google的Web框架。将此标记用于仅针对版本5的Angular问题。对于任何不特定于单个版本的Angular问题，请使用标记Angular。

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

angular forms angular5 angular-components

回答 6 投票 0

如何在 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-material angular5

回答 2 投票 0

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

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

firebase google-cloud-firestore angular5 angularfire2

回答 2 投票 0

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

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

angular rxjs angular5 angular8

回答 1 投票 0

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

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

javascript jquery directive angular5

回答 3 投票 0

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

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

node.js angular npm angular5

回答 4 投票 0

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

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

angular validation angular5

回答 4 投票 0

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

参数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> 我遇到的一个怪癖是表格内容在（粘性）辅助标题行下方仍然可见。

html angular-material angular5 angular-material-table

回答 2 投票 0

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

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

angular5 keycloak

回答 4 投票 0

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

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

angular angular-cli angular5

回答 2 投票 0

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

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

amazon-s3 angular5 amazon-cloudfront

回答 2 投票 0

垫子选择面板最小宽度

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

angular-material angular5 angular-material2 angular-material-6

回答 7 投票 0

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

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

angular angular5 angular-cli angular6

回答 4 投票 0

如何在角度材质下拉角度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 typescript angular-material angular5

回答 4 投票 0

Angular 5 - 使用管道清理 HTML

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

angular angular5 html-sanitizing

回答 4 投票 0

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

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

http-headers httprequest angular5 angular-httpclient

回答 1 投票 0

在angular5中使用基本授权http标头

我正在尝试从 API URL 中提取信息，但它请求基本授权 http 标头。如何使用标头从 URL 中提取信息？ this.myHttpClient.get(URL).sub...