angular 相关问题

将 *ngFor 数据拆分为 2 列

我有这个html： {{项目.标签}}<... 我有这个html： <div class="w-full flex justify-center"> <div *ngFor="let item of items" class="flex w-1/2"> <span>{{item.label}}</span> <span>{{item.value}}</span> </div> </div> 这样UI中的html显示为： LABEL 1 - VALUE 1 | LABEL 2 - VALUE 2 LABEL 3 - VALUE 3 | LABEL 4 - VALUE 4 LABEL 5 - VALUE 5 | LABEL 6 - VALUE 6 我需要显示这样的数据： LABEL 1 - VALUE 1 | LABEL 4 - VALUE 4 LABEL 2 - VALUE 2 | LABEL 5 - VALUE 5 LABEL 3 - VALUE 3 | LABEL 6 - VALUE 6 我一直在努力寻找可行的解决方案，但运气不佳。你能建议工作解决方案吗？ 将 items 数组分成两半。 chunkedItems: any[][] = []; let halfIndex = Math.floor(this.items.length / 2); this.chunkedItems = [ this.items.slice(0, halfIndex), this.items.slice(halfIndex, this.items.length), ]; } 并按如下方式构建弹性容器： <div class="w-full flex flex-wrap justify-center"> <ng-container *ngFor="let chunks of chunkedItems; let i = index"> <div class="flex flex-col w-1/2"> <div *ngFor="let item of chunks" class="flex"> <span>{{item.label}}</span> - <span>{{item.value}}</span> </div> </div> </ng-container> </div> 演示@StackBlitz 试试这个代码 {{item.label}} - {{item.value}} {{item.label}} - {{item.value}} @Component({ selector: 'app-your-component', templateUrl: './your-component.component.html', styleUrls: ['./your-component.component.css'] }) export class YourComponent { items = [ { label: 'LABEL 1', value: 'VALUE 1' }, { label: 'LABEL 2', value: 'VALUE 2' }, { label: 'LABEL 3', value: 'VALUE 3' }, { label: 'LABEL 4', value: 'VALUE 4' }, { label: 'LABEL 5', value: 'VALUE 5' }, { label: 'LABEL 6', value: 'VALUE 6' } ]; firstColumnItems() { return this.items.filter((item, index) => index % 3 === 0 || index % 3 === 1); } secondColumnItems() { return this.items.filter((item, index) => index % 3 === 2); } } <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script> <div class="w-full flex justify-center"> <div class="w-1/2" *ngFor="let item of firstColumnItems()"> <span>{{item.label}}</span> - <span>{{item.value}}</span> </div> <div class="w-1/2" *ngFor="let item of secondColumnItems()"> <span>{{item.label}}</span> - <span>{{item.value}}</span> </div> </div>

在 typescript Angular 4 中将传单地图导出为 JPG

我正在制作一个带有传单地图的 Angular4 应用程序，我需要将地图的当前视图导出到一张 JPG 图像中。 就像截屏一样，但只是带有标记和折线的地图。 所以，f...

使用 Karma 进行测试 - 无法绑定到“routerLink”，因为它不是

我刚开始在 Angular 6 应用程序中使用 Karma/Jasmine 进行测试，并且需要一些帮助来解决我最常见的故障之一。 这是我的模板中“RouterLink”的使用和配置。我没有呃...

垫子图标按钮和垫子按钮的对齐

我有一个场景，我想将一些按钮对齐在同一水平线上。我不明白为什么 mat-icon-button 没有与其他按钮相同的对齐方式。两者都有

角度变化检测问题。为什么这个黑客有效？

我正在使用 Angular 17，并且有一个相当复杂的应用程序，其中包含多个组件、一些第三方服务和一个 Google 地图实例。 我的 html 中有很多绑定属性，其中一些绑定到

订阅 Angular 2 中的路由参数和查询参数

我已经设置了以下路由系统 导出 const MyRoutes: 路由 = [ {路径：''，redirectTo：'新'，pathMatch：'完整'}， {路径：'：类型'，组件：MyComponent} ]; 并有以下

ApexCharts 雷达图的图表始终可以转到最大数据

似乎在顶点图表中，为雷达生成的图表始终符合您指定的数据。 有谁知道是否可以让它始终达到最大值而不是...

Angular：出现错误时如何使用 catchError 完成调用

我有以下代码，使用 Angular 的 http 客户端： 私有 fetch(): Observable { 返回 this.http.get('myUrl') .pipe(catchError((err) => of(0))), ）； } 获取全部...

在对话框中实现组件的关闭按钮

我有一个组件 A，通常应该在没有关闭按钮的情况下显示。但是，当我在对话框中打开组件 A 时，我想添加一个关闭按钮来关闭对话框。 我怎样才能实现这个

禁用单元格编辑器

<p-cellEditor style="width: 100%;"> <ng-template pTemplate="input"> <p-inputNumber [(ngModel)]="object.amount" name="chargedAmount" mode="currency" currency="PHP" [disabled]="disableFieldEdit"></p-inputNumber> </ng-template> <ng-template pTemplate="output"> {{ object.amount | currency: 'PHP'}} </ng-template> </p-cellEditor> 我已经添加了disableFieldEdit，问题是字段显示不可见，因为禁用为灰色。我需要单击该字段才能查看其是否已禁用 您无法禁用 p-cellEditor，您应该使用 ngIf 指令，以便在单元格可编辑的情况下显示 p-cellEditor，否则您将显示静态单元格 <p-cellEditor style="width: 100%;" *ngIf="canEditCell;else staticCell"> <ng-template pTemplate="input"> <p-inputNumber [(ngModel)]="object.amount" name="chargedAmount" mode="currency" currency="PHP" [disabled]="disableFieldEdit"></p-inputNumber> </ng-template> <ng-template pTemplate="output"> {{ object.amount | currency: 'PHP'}} </ng-template> </p-cellEditor> <ng-template #staticCell> {{ rowData[col.field] }} </ng-template>

如何使嵌套html表格中的特定列水平滚动？

当有3个或更多货币栏时，我想让它水平滚动，如下所示： 目前，我的表如下所示： 前 6 列是固定的，将占据父表的 80%

在卡信息之间切换

我有一个子组件，当您单击其按钮时会显示信息。 信息数据.component.html 我有一个子组件，当您单击其按钮时会显示信息。 信息数据.component.html <div class="col-12 col-sm-12 col-md-12 col-lg-12"> <div class="col-sm-12 col-md-12 col-lg-12 p-2 info"> <h6 (click)="questionClick()">{{headName}} <fa-icon [icon]="icons.faInfoCircle" class="fa-1x text-primary" transform="shrink-2"></fa-icon> </h6> </div> <ng-template #childTemplate> <div class="row" [hidden]="visibleStatus"> <div class="col-12 bulb-section"> <div class="row m-0"> <div class="icon-bulb col"> <p class="ml-4"> {{infoData}} </p> </div> </div> </div> </div> </ng-template> <ng-container *ngIf="!displayInfo; then childTemplate"></ng-container> </div> 信息数据.component.ts export class InformationDataComponent { @ViewChild('childTemplate', { static: true }) childTemplate: TemplateRef<any>; constructor() { } @Input() infoData: string; @Input() visibleStatus: boolean; @Input() headName: string; @Input() displayInfo?: boolean; questionClick () { this.visibleStatus = !this.visibleStatus; } } 场景 - 在我的父组件中，我有 3 个引导卡，每个卡都有不同的数据。当我点击一张卡片时，我只想显示相应卡片的信息，在这种情况下隐藏其他两张卡片。 <div class="card"> <div class="card-body"> <information-data [infoData]="salonInfo" [headName]="salonHead" [visibleStatus]="true" [displayInfo]="true" ></information-data> </div> </div> </div> <div class="col-4 col-sm-4 col-md-4 col-lg-4"> <div class="card"> <div class="card-body"> <information-data [infoData]="hospitalInfo" [headName]="hospitalHead" [visibleStatus]="true" [displayInfo]="true" ></information-data> </div> </div> </div> <div class="col-4 col-sm-4 col-md-4 col-lg-4"> <div class="card"> <div class="card-body"> <information-data [infoData]="travelInfo" [headName]="travelHead" [visibleStatus]="true" [displayInfo]="true" ></information-data> </div> </div> <div class="row pl-5 pr-5"> <ng-container *ngTemplateOutlet="childComponent.childTemplate"></ng-container> </div> </div> 其他场景 - 我在应用程序的其他部分广泛使用这个子组件，如下所示，并且不应更改它。 <retail-information-data [infoData]="funcInfo" [headName]="funcHead" [visibleStatus]="funcVisibility" ></retail-information-data> 如何在不影响代码其他部分的情况下实现此功能？ 使用输出 @Output() displayInfoChange:EventEmitter<boolean>=new EventEmitter<boolean>() 当改变时 questionClick () { this.visibleStatus = !this.visibleStatus; // this.displayInfoChange.emit(this.visibleStatus); } 因此，您可以使用两种方式绑定，并且您的父级考虑到更改，定义一个数组displayInfos displayInfos:boolean[]=[true,false,false] <!--change each "0", by "1" and "2" to the second and third card--> <information-data [infoData]="salonInfo" [headName]="salonHead" [visibleStatus]="true" [(displayInfo)]="displayInfos[0]" (displayInfoChange)="displayInfos[0] && restToFalse(0)" ></information-data> restToFalse(index:number) this.displayInfos=this.displayInfos.map((x,i)=>(i==index)) }

Angular：错误，未按应有的方式安装

我是 Angular 2 和 Angular CLI 环境的新手。 我正在开发一个项目，并尝试安装 Angular CLI 和相关的东西。它已安装但是： 当 ng --version 被选中时 角度 CLI...

如何在单元测试中将私有订阅变量设置为 null（或未定义）？

我目前正在为一些较旧的 Angular 代码编写单元测试，这些代码不是我编写的，也无法更改。 这是一个简化的示例： 导出类 SomeServiceComponent 实现 OnDestroy { 私人

修改 Angular 16 mat-form-field 样式

我希望更改 Angular Material 的 MatFormField 的默认样式。我想减少表单字段中输入字段的内部填充，并减少每个表单字段之间的间隙。 我是

如何在 Angular 中将“ngx-editor”的工具栏选项动态格式化为变量或常量形式？

从'ngx-editor'导入{编辑器，工具栏}； 工具栏: 工具栏 = [['粗体', '斜体', 'bullet_list', 'ordered_list']]; 我想将上述工具栏值存储为常量或变量。预计

如何限制从 IIS 服务器访问/下载文件

我们的角度应用程序（dist文件夹）部署在IIS服务器上，该应用程序工作正常，但我能够使用浏览器windo中的url直接（无需登录）从服务器访问（下载）字体文件...

轮播指示器中的点代替线 - primeng

我正在开发一个轮播，但我希望指示器不是线条，我希望指示器是小点。答案在 css 文件中，但我不知道如何使用它，我想我必须

如何在 Angular 中仅显示一个针对多个删除的警报？

我有这样的代码=> 返回 next.handle(req).pipe( 地图（（响应：任何）=> { if ( req.method !== "GET" && HttpResponse 的响应实例 && response.sta...

旧的 Angular 页面得到服务

我有一个带有 Service Worker 的 Angular 16 网页。该页面由我控制下的 NGINX 提供服务。 最近我注意到，当访问该页面时，浏览器显示的是旧版本。我