出现以下错误： MatToolbar：尝试组合不同的工具栏模式。显式指定多个 元素或仅将内容放置在 中 出现以下错误： MatToolbar：尝试组合不同的工具栏模式。要么显式指定多个 <mat-toolbar-row> 元素，要么仅将内容放置在单行的 <mat-toolbar> 中。 我的代码已经在 mat-toolbar 中应用了 mat-toolbar-row。然而，该错误仍然存在。 html文件的代码片段如下： <div class="wallpaper"> <mat-toolbar color="primary"> <mat-toolbar-row> <span>Welcome, User</span> <span class="example-fill-remaining-space"></span> <span class="align-center"></span> <span class="example-spacer"></span> <button mat-button>Create Incident </button> <a [routerLink]="['/closed']"><button mat-button style="color: white">Closed Incident</button></a> <span class="example-spacer"></span> <a [routerLink]="['/login']"><button mat-button>Logout</button></a> <img src="../../assets/hsbc_logo3.png" class="logo-hsbc"/> </mat-toolbar-row> <h1>INCIDENT MANAGEMENT SYSTEM</h1> </mat-toolbar> <h1>Welcome to Incident Management System</h1> <mat-card style="background: transparent"> <!-- Title of an Card --> <mat-card-title>Incident Details</mat-card-title> <mat-card-content> <form> <table > <tr> <td> <mat-form-field class="demo-full-width"> <mat-label >Description</mat-label> <textarea [(ngModel)]="incident.description" name="description" cdkTextareaAutosize cdkAutosizeMinRows="1" cdkAutosizeMaxRows="5" matInput></textarea> </mat-form-field> </td> <td> <h4>{{message}}</h4> </td> </tr> <tr> <td> <mat-form-field class="demo-full-width"> <input matInput [matDatepicker]="picker" placeholder="Incident Date" [(ngModel)]="incident.date" name="date" > <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker touchUi="true" #picker></mat-datepicker> </mat-form-field> </td> </tr> <tr> <td colspan="2"> <mat-form-field class="demo-full-width"> <input matInput placeholder="Incident Category" [(ngModel)]="incident.category" name="category"> </mat-form-field> </td> </tr> <tr> <td > <mat-form-field class="demo-full-width"> <mat-select placeholder="Application Owner" [(ngModel)]="incident.owner" name="owner"> <mat-option style="background-color:grey">-- Select--</mat-option> <mat-option style="background-color:cornsilk" value="1">BRV</mat-option> <mat-option style="background-color:cornsilk" value="2">FRTB</mat-option> <mat-option style="background-color:cornsilk" value="3">FSA</mat-option> </mat-select> </mat-form-field> </td> <td> <mat-form-field> <mat-select placeholder="Symphony Group" [(ngModel)]="incident.symphony_group" name="symphony_group"> <mat-option style="background-color:grey">-- Select --</mat-option> <mat-option style="background-color:cornsilk" value="1">MMO SheHacks</mat-option> <mat-option style="background-color: cornsilk" value="2">MMO IT INDIA</mat-option> </mat-select> </mat-form-field> </td> </tr> <tr> <td> <mat-form-field> <mat-select placeholder="Application" [(ngModel)]="incident.application" name="application"> <mat-option style="background-color:grey">-- Select--</mat-option> <mat-option style="background-color:cornsilk" value="1">BRV</mat-option> <mat-option style="background-color:cornsilk" value="2">FRTB</mat-option> <mat-option style="background-color:cornsilk" value="3">FSA</mat-option> </mat-select> </mat-form-field> </td> <td> <mat-form-field> <mat-select placeholder="Status" [(value)]="status" [(ngModel)]="incident.status" name="status"> <mat-option style="background-color:grey">-- Select --</mat-option> <mat-option style="background-color: green" value="1">Available</mat-option> <mat-option style="background-color: orange" value="2">Reduced</mat-option> <mat-option style="background-color: red" value="3">Unavailable</mat-option> </mat-select> </mat-form-field> </td> </tr> <tr> <td colspan="2"> </td> </tr> <tr> <td colspan="2" class="content-center"> <button style="margin:5px" mat-raised-button color="accent" (click)="submit()">Submit Incident</button> <button style="margin:5px" mat-raised-button color="accent" (click)="reset()">Clear</button> <button style="margin:5px" mat-raised-button color="accent">Raise BGCR</button> <button style="margin:5px" mat-raised-button color="accent">Raise Jira</button> </td> </tr> </table> </form> </mat-card-content> </mat-card> </div> 您需要移除 <h1>INCIDENT MANAGEMENT SYSTEM</h1> 或将其放入 <mat-toolbar-row> 内。 我无法在垫子工具栏中填充图像 有什么帮助吗？
所以我有一张垫子桌 所以我有一张垫子桌 <mat-table class="table" cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="tableDrop($event)" [dataSource]="tableDataSource"> <ng-container *ngFor="let column of columns; let i = index" [matColumnDef]="column.name"> <mat-header-cell *matHeaderCellDef cdkDrag dkDragLockAxis="x" cdkDragBoundary="mat-header-row"> {{ column.title }} </mat-header-cell> <mat-cell *matCellDef="let element"> {{ element[column.name] }} </mat-cell> </ng-container> <mat-header-row class="tableHeader" *matHeaderRowDef="tableDisplayedColumns" #tableHeaderRow> </mat-header-row> <mat-row class="tableRow" *matRowDef="let row; columns: tableDisplayedColumns;" [class.selected-row]="tableSelectedRows.has(row)" (click)="selectUnselectRow(row)"> </mat-row> </mat-table> 但我需要在表标题下为相应的行过滤器添加一行。我尝试在标题和实际行声明之间添加 <mat-row> ，但是由于过滤器是不同的输入（例如数字、自动完成选择和多选），我无法 *ngFor 它们（而且我不是当然我是否能够） 编辑：忘记发布过滤器 HTML <div class="filterGroup"> <mat-form-field class="filterField"> <input matInput type="number" (keydown)="updateManualPage(1)" placeholder="Filter za param1" formControlName="filterParam1"> </mat-form-field> <mat-form-field class="filterField"> <input matInput (keydown)="updateManualPage(1)" placeholder="Filter za param2" formControlName="filterParam2" [matAutocomplete]="autoSingleSelect"> <mat-autocomplete #autoSingleSelect="matAutocomplete" class="filterSelect" panelClass="filterSelect"> <mat-option *ngFor="let option of dropdownSingleFilteredOptions | async" [value]="option.param2"> {{option.param2}} </mat-option> </mat-autocomplete> </mat-form-field> <mat-form-field class="filterField"> <mat-select class="filterMultiselect" placeholder="Filter za param3" formControlName="filterParam3" multiple panelClass="filterMultiselect"> <mat-option *ngFor="let option of tableDataSource.data" [value]="option.param3"> {{option.param3}} </mat-option> </mat-select> </mat-form-field> </div> 以及相关组件.ts tableDisplayedColumns: string[] = ['param1', 'param2', 'param3']; columns: any[] = [ { name: 'param1', title: 'Param1' }, { name: 'param2', title: 'Param2' }, { name: 'param3', title: 'Param3' } ]; 为了解决这个问题，我设法通过删除 *ngFor 并手动放入过滤器来做到这一点。 <mat-table class="table" cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="tableDrop($event)" [dataSource]="tableDataSource"> <ng-container matColumnDef="param1"> <mat-header-cell *matHeaderCellDef cdkDrag cdkDragLockAxis="x" cdkDragBoundary="mat-header-row" [cdkDragStartDelay]="100"> Param1 <mat-form-field class="filterField"> <input matInput type="number" (keydown)="updateManualPage(1)" placeholder="Filter" formControlName="filterParam1"> </mat-form-field> </mat-header-cell> <mat-cell *matCellDef="let data"> <span>{{data.param1}}</span> </mat-cell> </ng-container> <ng-container matColumnDef="param2"> <mat-header-cell *matHeaderCellDef cdkDrag cdkDragLockAxis="x" cdkDragBoundary="mat-header-row" [cdkDragStartDelay]="100"> Param2 <mat-form-field class="filterField"> <input matInput (keydown)="updateManualPage(1)" placeholder="Filter" formControlName="filterParam2" [matAutocomplete]="autoSingleSelect"> <mat-autocomplete #autoSingleSelect="matAutocomplete" class="filterSelect" panelClass="filterSelect"> <mat-option *ngFor="let option of dropdownSingleFilteredOptions | async" [value]="option.param2"> {{option.param2}} </mat-option> </mat-autocomplete> </mat-form-field> </mat-header-cell> <mat-cell *matCellDef="let data"> <span>{{data.param2}}</span> </mat-cell> </ng-container> <ng-container matColumnDef="param3"> <mat-header-cell *matHeaderCellDef cdkDrag cdkDragLockAxis="x" cdkDragBoundary="mat-header-row" [cdkDragStartDelay]="100"> Param3 <mat-form-field class="filterField"> <mat-select class="filterMultiselect" placeholder="Filter" formControlName="filterParam3" multiple panelClass="filterMultiselect"> <mat-option *ngFor="let option of tableDataSource.data" [value]="option.param3"> {{option.param3}} </mat-option> </mat-select> </mat-form-field> </mat-header-cell> <mat-cell *matCellDef="let data"> <span>{{data.param3}}</span> </mat-cell> </ng-container> <mat-header-row class="tableHeader" *matHeaderRowDef="tableDisplayedColumns" #tableHeaderRow> </mat-header-row> <mat-row class="tableRow" *matRowDef="let row; columns: tableDisplayedColumns;" [class.selected-row]="tableSelectedRows.has(row)" (click)="selectUnselectRow(row)"> </mat-row> </mat-table>
我正在使用 Angular Material 14.0.4 和 Angular 15.1.3。 我有一个垫选择下拉菜单，是这样写的...... 我正在使用 Angular Material 14.0.4 和 Angular 15.1.3。 我有一个mat-select下拉菜单，是这样写的... <mat-select value="5" panelClass="custom-panel"> <mat-option value="5">5</mat-option> <mat-option value="10">10</mat-option> <mat-option value="20">20</mat-option> </mat-select> 在此我应用了panelClass及其CSS代码如下... .custom-panel { top: calc(100% + 10px) !important; } 而且仍然如下。下拉列表与其文本框重叠 这是未选中时的下拉菜单 这是选择后的下拉菜单 如何将面板放置在选择文本框的正下方... 您可以使用下面的CSS来做到这一点！ 我们使用csstransform将面板移动到底部！ .custom-panel { transform: translateY(25px) !important; } 堆栈闪电战
Mat-autocomplete 和 mat-option 事件在过滤后分页速度太慢？
使用我设法从API中找到的任何类型的事件进行选择和自动完成最终都会导致MatPaginator“落后一步”，例如而过滤后的数据应该只有 200 个...
我在使用 Shadcn Dialog 组件时在 Next.js 项目中遇到水合错误。错误信息是： “水合失败，因为初始 UI 与渲染的内容不匹配......
我在 mat-tab-group 中有两个选项卡： 我在 mat-tab-group 中有两个选项卡： <mat-tab-group animationDuration="0ms" [disablePagination]="false" mat-stretch-tabs="false" mat-align-tabs="start" > <mat-tab label="First tab"> <ng-template matTabContent> <app-first-tab /> </ng-template> </mat-tab> <mat-tab label="Second tab"> <ng-template matTabContent> <app-second-tab /> </ng-template> </mat-tab> </mat-tab-group> 在第一个选项卡上，我生成了很多组件，因此需要一些时间才能完全渲染。 当我选择第二个选项卡并返回第一个选项卡时，应用程序会冻结（几秒钟），直到所有内容都呈现出来。 是否可以显示例如。标题（它的更多-更少的静态），一些微调器，当所有内容都渲染时，隐藏微调器？或者让用户以某种方式知道发生了什么事？ 示例：https://stackblitz.com/edit/stackblitz-starters-sb2saw ..仅用于测试目的。 非常感谢。 您遇到的问题有两个部分： 您的异步请求的模拟实际上是使用同步函数（for循环），该函数在访问服务时正在运行。这不是标准 Observable 在野外的工作方式，也是选项卡之间漫长等待的根源。 您可以利用容器和模板在加载异步变量时显示加载微调器。 HTML 示例： <ng-container *ngIf="data$ | async as data; else loading"> <table> <thead> <th>ID</th> <th>Code</th> <th>Buttons</th> </thead> <tbody> <tr *ngFor="let item of data"> <td>{{ item.id }}</td> <td>{{ item.code }}</td> <td> @for (idx of buttonCount; track idx; let index = $index) { <button>{{ idx }}</button> } </td> </tr> </tbody> </table> </ng-container> <ng-template #loading><mat-spinner></mat-spinner></ng-template> 更新了服务以更好地模拟异步数据（也可以作为 Observable 共享）： async fetchData(): Promise<ApiModel[]> { let result: ApiModel[] = []; for (let i = 1; i <= this.cnt; i++) { result.push({ id: i, code: `item_${i}` }); } return new Promise((resolve, reject) => { setTimeout(() => resolve(result), Math.random() * 5000); }); } 结果是立即交换选项卡，在加载数据时显示一个微调器图标： StackBlitz 叉子链接
我正在尝试使用 Vue 以编程方式阻止 HTML 对话框元素的关闭事件关闭对话框。这是我正在使用的代码： 从“vue”导入{ref}； const 对话框模板Re...
我在我的角度应用程序中使用角度材料2。当我的表单输入字段错误消息超过一行时，我遇到了问题。这是照片： 这是代码： 我在我的角度应用程序中使用角度材料 2。当我的表单输入字段错误消息超过一行时，我遇到了问题。这是照片： 这是代码： <md-error *ngIf="password.touched && password.invalid"> <span *ngIf="password.errors.required"> {{'PASSWORD_RECOVERY.FIELD_REQUIRED' | translate}} </span> <span *ngIf="password.errors.minlength || password.errors.maxlength"> {{'PASSWORD_RECOVERY.PASSWORD_LENGTH' | translate}} </span> <span *ngIf="password.errors.pattern"> {{'PASSWORD_RECOVERY.FOR_A_SECURE_PASSWORD' | translate}} </span> </md-error> 我通过阅读 github 了解到，这是 Angular 2 材料中的一个错误。有人通过自定义解决方法成功解决了这个问题吗？ 问题是类为 .mat-form-field-subscript-wrapper 的元素是 position: absolute，所以它不占用实际空间。 按照 xumepadismal 在 github 上关于此问题的建议，您可以添加此 scss 作为解决我的问题的解决方法： // Workaround for https://github.com/angular/material2/issues/4580. mat-form-field .mat-form-field { &-underline { position: relative; bottom: auto; } &-subscript-wrapper { position: static; } } 它会转换静态 div 中的 .mat-form-field-subscript-wrapper 节点，并将 .mat-form-field-unterline 重新定位在输入字段之后。 正如材料 15 中在 github 讨论中提到的，可以通过将 subscriptSizing="dynamic" 添加到 mat-form-field 来解决问题。 要更改默认行为，您必须使用以下选项更新 angular.module.ts 提供程序： providers: [ { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { subscriptSizing: 'dynamic' } } ] 这也可以在材料文档中找到 使用@mattia.corci提出的解决方案会导致错误消息被推到底部太多，从而在顶部留下不必要的空白空间。 使用 Tailwind CSS，这个解决方案对我来说适用于最新的 Angular 17： .mat-mdc-form-field { @apply w-full self-start; .mat-mdc-form-field-subscript-wrapper { @apply flex; .mat-mdc-form-field-error-wrapper { @apply static; } } } mat-form-field.ng-invalid.ng-touched { animation: example; animation-duration: 0.3s; margin-bottom: 20px; } @keyframes example { from { margin-bottom: 0; } to { margin-bottom: 20px; } } 它对我有用。
我创建了一个“自定义”主题（使用 https://material.angular.io/guide/theming 上的主题文档，这非常糟糕），如下所示： @import '~@angular/material/theming'; @包括 mat-cor...
我需要使用 Mat-Select 指令的下拉过滤器通过按钮而不是输入字段来调用和显示。另外我想隐藏输入字段，以便只有按钮可见......
没有匹配的函数可用于调用“std::thread::thread(<unresolved overloaded function type>)”
无效show_image(){ // 创建一个Mat来存储图像 马特凸轮图像； ERROR_CODE 错误； // 循环直到'e'被按下 字符键=''； while (key!= 'e') { // 抓取图像 错误= cam.grab(); ...
我正在尝试为材质多选做一个简单的复选框背景颜色更改。 我尝试过两者都做 .mat-pseudo-checkbox-checked { 背景颜色：#a9a9a9 ！重要； } 和 :主持人::ng-de...
为什么我在GWT中无法隐藏UiBinder中的DialogBox？
在 Test.ui.xml 中 测试 一些小部件.. 在Test.ui.xml <g:DialogBox ui:field="wishlistDialogBox" autoHide="true"> <g:caption>Test</g:caption> <g:HTMLPanel> some widgets..</g:HTMLPanel> </g:DialogBox> 运行后，应用程序仍然显示DialogBox，所以我尝试在TestView.java中为“wishlistDialogBox”设置隐藏，但没有成功。 @UiField DialogBox wishlistDialogBox; @Inject public TestView(final Binder binder) { widget = binder.createAndBindUi(this); wishlistDialogBox.hide(); } 然后我在TestPresenter.java中为它设置了隐藏，但仍然不起作用 @Override protected void onBind() { super.onBind(); getView().getWishlistDialogBox().hide(); } 怎么了，古德尔根本没有解释。 另外，DialogBox如何重复使用？ 当谈论将它们添加到 DOM 时，DialogBox（以及一般的 PopupPanel）不像任何其他小部件那样工作。您永远不应该像以前那样将它们直接附加到它（即 panel.add(yourDialogBox) 或在 UiBinder XML 文件中）。相反，您应该创建它们，然后简单地调用 hide()/show() 以及类似的方法，以使其显示/隐藏（即，在 DOM 的末尾附加/分离）。 对我有用的是与任何其他小部件分开创建一个对话框。所以它有自己的 Java 文件和自己的 ui.xml 文件： UiBinder xml文件： <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui"> <g:DialogBox ui:field="dialog"> <g:caption>My Dialog</g:caption> <g:HTMLPanel> <g:Button ui:field="closeButton" text="close" /> </g:HTMLPanel> </g:DialogBox> </ui:UiBinder> Java 文件： public class MyDialog { // here you do not inherit anything private static MyDialogUiBinder uiBinder = GWT.create(MyDialogUiBinder.class); interface MyDialogUiBinder extends UiBinder<Widget, MyDialog> { } @UiField DialogBox dialog; @UiField Button closeButton; public MyDialog() { // make cast to DialogBox dialog = (DialogBox) (uiBinder.createAndBindUi(this)); } public void hide() { dialog.hide(); } public void show() { dialog.center(); } @UiHandler("closeButton") public void onClick(ClickEvent event) { hide(); } } 最后我想出了一个办法，那就是把DialogBox放到一个看不见的HTMLPanel <g:HTMLPanel visible="false"> <g:DialogBox ui:field="wishlistDialogBox" autoHide="true"> <g:caption>Test</g:caption> <g:HTMLPanel> some widgets..</g:HTMLPanel> </g:DialogBox> </g:HTMLPanel> 然后像往常一样调用 show & hide DialogBox，即使 DialogBox 被包裹在一个看不见的 DialogBox 中，它也会显示 HTMLPanel。 getView().getWishlistDialogBox().show();
我正在尝试想出一个正则表达式，它允许我匹配具有相等部分和它们之间的分隔符的字符串。例如： 富;富 <- match foobar;foobar <- mat...
对高于 7.3 的 matlab 版本使用 Mat_CreateVer
我有一个适用于Windows平台的C++应用程序。此应用程序创建 .mat 文件。目前我们仅支持 4、5 和 7.3 版本的 matlab。我们希望添加对更高版本的 matlab 的支持。 在...
选中/取消选中 mat-checkbox 未正确返回 true 或 false
我正在使用 Angular 15 和 Angular Material 14，下面是我用来显示复选框列表的 HTML 代码 我正在 Angular 15 和 Angular Material 14 工作，下面是我用来显示复选框列表的 HTML 代码 <div *ngFor="let control of checkboxArray.controls;let i = index" > <mat-checkbox [formControl]="control" (input)="validateInputs(notificationForm)" [checked]="control.value" (change)="control.checked=$event.checked;onCheckedChange(i);"> {{ checkboxItems[i].name }} </mat-checkbox> </div> 下面是Angular中onCheckedChange函数的代码 onCheckedChange(index: number) { this.sortCheckboxArray(); const checkboxItem = this.checkboxItems[index]; const control = this.checkboxArray.at(index); if (control) { if (control.value) { this.lists.push(checkboxItem.id.toString()); } else { this.lists.pop(checkboxItem.id.toString()); } } this.updateSubscriberGroupsCount(); this.cdr.detectChanges(); } 当我选中复选框时，在这个 onCheckedChange 函数中，control.value 始终返回 false。哪里出了问题？无法理解.. 这是一个工作版本，复选框逻辑工作正常，希望有帮助！ 我们需要使用control.value获取表单组，但我们还需要访问内部表单控件，然后获取复选框值！ import { CommonModule } from '@angular/common'; import { Component } from '@angular/core'; import { FormArray, FormControl, FormGroup, ReactiveFormsModule, } from '@angular/forms'; import { bootstrapApplication } from '@angular/platform-browser'; import 'zone.js'; import { MatCheckboxModule } from '@angular/material/checkbox'; @Component({ selector: 'app-root', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatCheckboxModule], template: ` <form [formGroup]="form"> <div formArrayName="array"> <div *ngFor="let control of checkboxArray.controls;let i = index" [formGroupName]="i"> <mat-checkbox formControlName="test" style="margin-bottom: 15px;" (change)="onCheckedChange(i);"> {{ checkboxItems[i].name }} </mat-checkbox> </div> </div> </form> `, }) export class App { name = 'Angular'; form = new FormGroup({ array: new FormArray([]), }); lists = []; checkboxItems: any = []; ngOnInit() { this.add(); this.add(); this.add(); } add() { this.checkboxArray.push( new FormGroup({ test: new FormControl(false), }) ); this.checkboxItems.push({ name: 'test' }); } get checkboxArray() { return this.form.get('array') as FormArray; } onCheckedChange(index: number) { // this.sortCheckboxArray(); // const checkboxItem = this.checkboxItems[index]; const control = this.checkboxArray.at(index); if (control) { if (control.value.test) { console.log('checked'); // this.lists.push(checkboxItem.id.toString()); } else { console.log('not checked'); // this.lists.pop(checkboxItem.id.toString()); } } // this.updateSubscriberGroupsCount(); // this.cdr.detectChanges(); } } bootstrapApplication(App); 堆栈闪电战
我现在一直在努力了解如何手动更改元素的波纹颜色，但我似乎无法让它以任何方式工作。 我现在一直在努力研究如何手动更改 <mat-input> 元素的波纹颜色，但我似乎无法让它以任何方式工作。 <input matInput type="number" (keydown)="updateManualPage(1)" placeholder="Filter" formControlName="filterParam1"> 我已经尝试了CSS中我能想到的一切，.mat-form-field-underline，.mat-form-field-ripple，包括我使用::after和::before选择器从另一个SO问题/答案中无耻地撕掉的一大块类，尝试使用 ::ng-deep、!important，但似乎没有任何东西可以改变从 @import "../node_modules/@angular/material/prebuilt-themes/indigo-pink.css"; 导入的蓝色波纹的颜色 编辑：只需更好地阅读 API，所以我发现波纹后出现的边框颜色来自 <mat-form-field> 元素，该元素有一个颜色选择器。但是，该颜色选择器只能具有“primary”、“accent”和“warn”值。所以现在我想知道如何插入自定义颜色。 设法弄清楚了，原来如此 ::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple::after { border-bottom-color: *X* !important; }
我有一个小项目，要在我们的 nas 上显示图像。 我用的是角度17。 在主页上我有 3 个 mat-form-fields。由于某种原因，当我添加最后一个树垫表单字段时，我收到错误 -
我有一个材质多重选择，并注意到如果我的 mat-option 标签之前有内容，那么单击它们会导致滚动条跳转到奇怪的位置，从而导致令人难以置信的混乱行为......
希望这不是一个愚蠢的问题，但我已经没有主意了...... 所以我有这个模式： 1.scala.html 希望这不是一个愚蠢的问题，但我已经没有主意了...... 所以我有这个模式： 1.scala.html <div class="feat" id="cor" data-toggle="tooltip" data-placement="bottom" title="add conference role"><div data-toggle="modal" data-target="#conf-role-menu-modal">Conference Role</div></div> <div class="modal fade" id="conf-role-menu-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body-conf-role-menu"> <script type="text/javascript"> $(function(){ $(".modal-body-conf-role-menu").load("@routes.Application.areaConferenceRole(id,idenv)"); }); </script> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> 使用模态主体中的脚本，我尝试加载此页面： 2.scala.html @(id:String, idenv:String) @Main("Add area") { <form action="@routes.Application.areaPostConferenceRole(id,idenv)" method="POST"> First Name: <input type="text" name="first_name" id="first" class="form-control"> Last Name : <input name="last_name" class="form-control"> <script type="text/javascript"> $( document ).ready(function() { // Handler for .ready() called. $( "#first" ).focus(function() { alert( "Handler for .focus() called." ); }); }); </script> </form> } 页面加载正常。我在我的模态中看到它...... 问题是我的页面 2.scala.html 中的脚本无法运行。我不明白为什么......如果我从我尝试在模态中加载的页面之外尝试它们，它们就会起作用...... $( document ).ready(function(){}); 永远不会在模态中到达，因为加载页面时已经触发了此事件（模态在之后加载...） 尝试直接插入脚本，如下所示： <script type="text/javascript"> $( "#first" ).focus(function() { alert( "Handler for .focus() called." ); }); </script> 当引导模式弹出时，shown.bs.modal事件将被触发。这是例子。 $('#myModal').on('shown.bs.modal', function () { $('#myInput').trigger('focus') }) Full documentation. https://getbootstrap.com/docs/4.0/components/modal/ 试试这个我已经准备好这个功能了 $('#myModal').on('shown.bs.modal', function () { // Your script here }); $(document).on('shown.bs.modal', '#myModal', function () { // Your script here });
我如何根据状态更改按钮颜色（绿色表示“接受”，红色表示“删除”）
如何根据状态更改按钮颜色（绿色表示“接受”，红色表示“删除”） 我是新人，为此使用 Laravel 框架。 这是我的观点 如何根据状态更改按钮颜色（绿色表示“接受”，红色表示“删除”） 我是新人，为此使用 Laravel 框架。 这是我的看法 <table class="table table-striped" id="example"> <thead> <tr> <th>ID no</th> <th>Form Name</th> <th style="text-align: center">Update</th> <th>Delete</th> <th>Status</th> </tr> </thead> @foreach($form as $show) {{--modal--}} <div class="modal fade mj_popupdesign mj_checkoutpopup" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-body"> <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12 col-lg-offset-2 col-md-offset-2"> <div class="row"> <div class="mj_pricingtable mj_greentable mj_login_form_wrapper"> <form> <div class="mj_login_form"> <p>Are you sure you want to delete this post?</p> <br> <a href="" class="mj_btn btn btn-default pull-right glyphicon glyphicon-remove "> No</a> <a href="{{url('deleteForm',$show->id)}}" class=" pull-right mj_btn btn btn-danger glyphicon glyphicon-ok"> Yes</a> </div> </form> </div> </div> </div> </div> </div> </div> </div> {{--end modal--}} <tbody> <tr> <td> <p> {{$show->id}}</p> </td> <td> <h6><a href="{{url('JobDetails',$show->id)}}"style="color: rgb(0, 191, 243);font-size:18px;float: left;margin: 0;text-align: left">{{$show->jobTitle}}</a> </h6> <p> {{$show->created_at}} </p> </td> <td> <a href="{{url('UpdateFormView',$show->id)}}"> <span class="mj_btn btn btn-success">Update</span> </a> </td> <td> <span class="mj_btn btn btn-danger" data-toggle="modal" data-target="#myModal2">Delete</span> </td> <td><span class="mj_btn btn btn-warning">pending</span> </td> </tr> </tbody> @endforeach </table> </div> </div> </div> </div> 在我的控制器中public function AcquiredForm() { $acquired="Requirement Form"; $acquireForm=Job::where('jobType','LIKE','%'.$acquired.'%'); $form = $acquireForm->get(); return view('private-pages.company.aquire-form',compact('form')); } 数据库状态默认为待处理 数据库状态默认为pending 我在代码中没有看到 status 属性，但显示状态为待处理的纯字符串 <span class="mj_btn btn btn-warning">pending</span> <!-- while it suppose to be --> <span class="mj_btn btn btn-warning">{{ $show->status }}</span> 假设它确实存在，你可以做 <td> @if ($show->status === 'Accept') <span class="mj_btn btn btn-green">Accepted</span> @elseif ($show->status === 'Delete') <span class="mj_btn btn btn-danger">Deleted</span> @else <span class="mj_btn btn btn-warning">Pending</span> @endif </td> 参见：https://laravel.com/docs/5.1/blade#displaying-data <td> @if ($show->jobstatus === "Accepted") <span class="mj_btn btn btn-success">Accepted</span> @elseif ($show->jobstatus === "Rejected") <span class="mj_btn btn btn-danger">Rejected</span> @else <span class="mj_btn btn btn-warning">Pending</span> @endif </td> 或者当你使用 1. laravel esialy customaize this code nad add automatic refresh in the page to more interactive @php if($da->status == "requested") { echo "<td><button class='btn btn-primary'>Requested</button></td>"; } else { echo "<td><button class='btn btn-success'>Ordered</button></td>"; } @endphp
ClosedXML 导出数据网格到 Excel 仅 10 行
我有一个包含 60 行数据的数据网格和一个将其导入 Excel 的按钮： 我有一个包含 60 行数据的数据网格和一个将其导入 Excel 的按钮： <DataGrid AutoGenerateColumns="False" ItemsSource="{Binding Source}" CanUserAddRows="False" HeadersVisibility="All" Name="dgDisplay"> <DataGrid.Columns> <DataGridTextColumn Header="Day" Binding="{Binding Day}"/> <DataGridTextColumn Header="Data" Binding="{Binding Data}"/> </DataGrid.Columns> </DataGrid> <Button Command="{Binding SaveDataGridToExcelCommand}" CommandParameter="{Binding ElementName=dgDisplay}"/> 其中 Day 和 Data 只是一些随机生成的 int 数据。 我的代码使用 ClosedXML 将数据从中导出到 Excel，它使用 MainWindowViewModel: ObservableObject 调用 MVVM.Toolkit。 [RelayCommand] public void SaveDataGridToExcel(DataGrid dataGrid) { DataTable dt = new DataTable(); foreach (DataGridColumn column in dataGrid.Columns) { dt.Columns.Add(column.Header.ToString()); } foreach (var item in dataGrid.Items) { DataRow dr = dt.NewRow(); bool rowHasData = false; for (int i = 0; i < dataGrid.Columns.Count; i++) { var cellContent = dataGrid.Columns[i].GetCellContent(item); if (cellContent is TextBlock textBlock) { //check if row empty, dont add this row.I add it on purpose to check //if the datagrid recognite the rest 50 rows not have data. It actually //dont save those data dr[i] = textBlock.Text; if (!string.IsNullOrEmpty(textBlock.Text)) { rowHasData = true; } } } if (rowHasData) { dt.Rows.Add(dr); } } SaveFileDialog saveFileDialog = new SaveFileDialog(); saveFileDialog.Filter = "Excel files (*.xlsx)|*.xlsx"; if (saveFileDialog.ShowDialog() == DialogResult.OK) { using (XLWorkbook wb = new XLWorkbook()) { wb.Worksheets.Add(dt, "Sheet1"); wb.SaveAs(saveFileDialog.FileName); } } } 但是保存的60行结果只显示了10行数据，其余50行都是空的。如果疑问为什么不使用Microsoft.Interop.Excel，那是因为该包不适合我的 Excel 版本。我没有在 ClosedXML 中看到任何对此有限制或许可的地方，所以我想知道为什么。如有任何帮助，我们将不胜感激。 在浏览 github 几个小时后，我自己找到了答案。 我没有访问单元格内容，而是直接从 DataGrid 的 ItemsSource 访问数据： public void SaveDataGridToExcel(DataGrid dataGrid) { DataTable dataTable = new DataTable(); foreach (DataGridColumn column in dataGrid.Columns) { dataTable.Columns.Add(column.Header.ToString()); } var itemsSource = dataGrid.ItemsSource as IEnumerable; if (itemsSource != null) { foreach (var item in itemsSource) { var properties = item.GetType().GetProperties(); var row = dataTable.NewRow(); foreach (var property in properties) { row[property.Name] = property.GetValue(item); } dataTable.Rows.Add(row); } } //show dialog... }