angular7 相关问题

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

晚上好，我有这个组件：超文本标记语言晚上好，我有这个组件： HTML <button mat-menu-item #leagueMenuTrigger="matMenuTrigger" [matMenuTriggerFor]="leagueMenu" (mousedown)="onMouseDown(leagueMenuTrigger)"> {{group.group_name}} </button> <mat-menu #leagueMenu="matMenu"> <button mat-menu-item> Club Home {{group.group_id}} </button> <button mat-menu-item> Events </button> <button mat-menu-item> Player Roster </button> <button mat-menu-item> Results and Standings </button> <button mat-menu-item> Ledger </button> <button mat-menu-item> Club Settings </button> </mat-menu> TS import { OnInit, Component, Input, AfterViewInit } from '@angular/core'; import { MatMenuTrigger } from '@angular/material/menu'; import { Group } from 'src/app/objects/group'; @Component({ selector: 'wagl-league-menu', templateUrl: './league-menu.component.html', styleUrls: ['./league-menu.component.scss'] }) export class LeagueMenuComponent implements OnInit { @Input() group: Group; constructor() {} ngOnInit() {} onMouseDown(leagueMenuTrigger: MatMenuTrigger) { // This method can be used for any specific mouse down logic if needed. console.log(leagueMenuTrigger.menuOpen); leagueMenuTrigger.openMenu(); console.log(leagueMenuTrigger.menuOpen); } } 如果我简单地这样称呼它： <wagl-league-menu [group]="league"></wagl-league-menu> 它会起作用，但是当我这样称呼它时： <wagl-league-menu *ngFor="let league of leagues" [group]="league"></wagl-league-menu> 它不起作用，我似乎无法指出我做错了什么。我正在使用 Angular 7。当您使用 ngFor 指令与组件的多个实例调用 LeagueMenuComponent 时，可能会出现与尝试管理相同 mat-menu 的多个 MatMenuTrigger 实例相关的问题。 MatMenuTrigger 实例用于控制菜单的打开和关闭，当您有多个组件实例时，它们可能会相互冲突。要处理这种情况，您可以使用 ViewChild 装饰器来获取 LeagueMenuComponent 的每个实例中对 MatMenuTrigger 的引用。这样，每个实例都可以管理自己的 MatMenuTrigger。以下是修改 LeagueMenuComponent 以使其在 ngFor 循环中工作的方法： import { OnInit, Component, Input, AfterViewInit, ViewChild } from '@angular/core'; import { MatMenuTrigger } from '@angular/material/menu'; import { Group } from 'src/app/objects/group'; @Component({ selector: 'wagl-league-menu', templateUrl: './league-menu.component.html', styleUrls: ['./league-menu.component.scss'] }) export class LeagueMenuComponent implements OnInit, AfterViewInit { @Input() group: Group; @ViewChild(MatMenuTrigger) leagueMenuTrigger: MatMenuTrigger; // Get a reference to the MatMenuTrigger constructor() {} ngOnInit() {} ngAfterViewInit() { // This method is called after the view has been initialized. // It's a good place to perform additional setup that requires the view to be ready. // Now you can access the leagueMenuTrigger instance and use it as needed. } onMouseDown() { // This method can be used for any specific mouse down logic if needed. // Since we have a reference to leagueMenuTrigger, we can use it here. console.log(this.leagueMenuTrigger.menuOpen); // Logs the current menuOpen state this.leagueMenuTrigger.openMenu(); // Opens the menu. } } 这是我解决问题的方法： <ng-container *ngFor="let league of leagues; trackBy: trackList" [attr.id]="league.group_id"> <wagl-league-menu [group]="league" [attr.id]="'league'+league.group_id"></wagl-league-menu> </ng-container> 使用 trackBy 似乎已经解决了这个问题。

angular angular7

回答 2 投票 0

如何模拟单元测试的角度路由状态

我正在为我的组件编写单元测试，但在创建组件实例时遇到问题并显示以下错误：类型错误：无法读取 null 的属性“patientId” 我试过了

unit-testing angular7 karma-jasmine angular-router

回答 1 投票 0

$location.search() 相当于 Angular 7

我正在将 Angular JS 迁移到 Angular 7。我正在查看这段代码并尝试在 Angular 7 中实现。在服务中，注入了$location，下面的方法重置和设置查询

javascript angular angular7 angular-components

回答 2 投票 0

获取错误无法测试“void”类型的表达式的真实性 angular 7

node_modules\@ng-bootstrap 中的错误 g-bootstrap\datepicker\datepicker-navigation.d.ts.NgbDatepickerNavigation.html(3,67): : 无法测试“void”类型的表达式的真实性节点模块...

datepicker node-modules angular7

回答 2 投票 0

Angular 7 - PDF 文件打不开

我在前端应用程序中使用 Angular 7，在后端应用程序中使用 CakePHP。单击按钮后，应在新选项卡中打开 pdf 文件。当我试图打开它时，而不是打开 pdf 文件（url:"

cakephp angular7 pdf-viewer

回答 0 投票 0

angular 7 在创建新项目时不询问是否使用路由

我以前使用的是 Angular 版本 6，现在我已经升级到 7。但是当我尝试使用 ng new [app-name] 在 CLI 中创建一个新项目时，它只是开始而不询问我是否要包含路由。 ..

javascript angular npm command-line-interface angular7

回答 4 投票 0

如何在 Angular 7 中设置选择选项的值？

问题是当我想更改值时，它总是显示第一个选项。这是我的 HTML：问题是当我想更改值时，它总是显示第一个选项。这是我的 html: <div class="col-lg-4 col-md-4 col-sm-12 mt-4"> <div class="form-group"> <select class="form-control" id="operator-groups" formControlName="operators"> <option disabled selected value>Seleccione</option> <option *ngFor="let operator of operators; let i = index;">{{operator.desc}}</option> </select> </div> </div> 这是我的组件： this._operatorgroups.index().subscribe(res => { let operators = <OperatorGroups[]>res; this.operators = operators; this.registerForm.controls['operators'].setValue(res[1].desc); }); 谢谢！您可以使用[selected]="condition that will result true for the option you want default" 例如，如果您想要第一个索引（基于您在组件中的代码），您会喜欢： <option *ngFor="let operator of operators; let i = index;" [selected] = "i==1">{{operator.desc}}</option> Another example is, if you want lets say operator desc 'xyz' selected, you'd like: <option *ngFor="let operator of operators; let i = index;" [selected] = "operator.desc == xyz">{{operator.desc}}</option>

javascript html angular angular7

回答 1 投票 0

Angular 7 和 xlsx 库如何使用字段名称而不是索引导出数组

在堆栈上的这个问题和这个 stackblitz 之后，如果分页没有显示所有数据，材料表似乎没有完全导出到 excel。所以相反，我将导出...

arrays angular angular7 js-xlsx

回答 2 投票 0

当应用程序在外部服务器上运行时，所有请求均未找到（404）

我的应用程序在使用 ng serve 命令或 ng serve --prod 命令时工作正常，但是当我使用 ng build --prod 命令构建它用于生产，然后使用 h...

angular request angular7

回答 2 投票 0

Angular 8：从 "url "加载模块被阻止，因为不允许使用MIME类型（"texthtml"）。

我已经在Angular 8和Node 12中创建了应用程序。创建Angular 8构建后，我面临着这个问题，而打开一个新的标签或页面重新加载，我已经搜索了所有周围的互联网没有... ...