angularjs-ng-disabled 相关问题

通过 ng-bind-html 使用插入的 HTML 中的函数

我从数据库中获取了一个 HTML 字符串，我想通过 ng-bind-html 将其插入到我的 AngularJs 应用程序中。我是这样做的： HTML： <... 我从数据库中获取了一个 HTML 字符串，我想通过 ng-bind-html 将其插入到我的 AngularJs 应用程序中。我是这样做的： HTML： <div ng-bind-html="myBindHtml"></div> JavaScript： $scope.myBindHtml = $sce.trustAsHtml(htmlStringToInsert); 我的 HTML（我想插入）看起来像这样： <button ng-click="testClickEvent()">TestButton</button> 插件工作正常。现在我编写了一个按钮应该调用的函数（testClickEvent）。这只是将一个字符串输出到控制台。但这部分不起作用。我猜想我插入的 HTML 与该函数没有绑定。有什么办法可以调用我的函数吗？ Angular 代码仅当您在 Angular 上下文中运行时才会执行。当您使用 ng-bind-html 时，它会在 Angular 上下文之外生成，因此像 ng-click 这样的 Angular 事件不起作用，您需要依赖像 onclick 这样的纯 JS 事件，因此请避免使用这些场景，而直接在 Angular 上进行编码，因为解决方案的复杂性！当需要角度事件并且我们需要直接在前端编码而不是从数据库或其他方法输入时，我们可以避免ng-bind-html var app = angular.module('myApp', []); app.controller('myCtrl', function ($sce, $scope) { $scope.items = []; for (var i = 1; i <= 2; i++) { $scope.items.push({ description: $sce.trustAsHtml('<h2 onclick="console.log(\'hello\')">with onclick item ' + i + '</h2>') }); }; $scope.items2 = []; for (var i = 1; i <= 2; i++) { $scope.items.push({ description: $sce.trustAsHtml('<h2 ng-click="console.log(\'hello\')"> with ng-click item ' + i + '</h2>') }); }; }); <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js" integrity="sha512-KZmyTq3PLx9EZl0RHShHQuXtrvdJ+m35tuOiwlcZfs/rE7NZv29ygNA8SFCkMXTnYZQK2OX0Gm2qKGfvWEtRXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <div ng-app="myApp"> <div ng-controller="myCtrl"> <div> <div ng-repeat="item in items" ng-bind-html="item.description"></div> </div> <hr /> <div> <div ng-repeat="item in items2" ng-bind-html="item.description"></div> </div> </div> </div>

禁用按钮时的角度显示工具提示

<button [disabled]="(!dataConceptSummmaryFlag || dataConceptSummmaryFlag === false) && (!selectedLOBFlag || selectedLOBFlag === false) && (!adsListFlag || adsListFlag === false)" class="lmn-btn lmn-btn-primary" aria-label="Update" (click)="updateSelectedScopes()" [mtTooltip]="disabledContent" > Update </button> <ng-container *ngIf="(!dataConceptSummmaryFlag || dataConceptSummmaryFlag === false) && (!selectedLOBFlag || selectedLOBFlag === false) && (!adsListFlag || adsListFlag === false)"> <ng-template #disabledContent>No New Scopes Values Selected</ng-template> </ng-container> 如果在该条件下禁用按钮，如何在悬停时显示工具提示文本，并且当我将鼠标悬停在其上时，我会看到红色关闭图标。这是我尝试过的，但没有成功将此添加到覆盖材质样式的文件中： // this workaround allows for the tooltips to appear on disabled buttons (since mouse events aren't fired for them) button:disabled.mat-mdc-tooltip-trigger { pointer-events: auto !important; // remove the ripple effect on hover > span:first-child { display: none; } } 悬停时它将显示没有波纹背景的工具提示。

更改垫输入的波纹颜色

我现在一直在努力了解如何手动更改元素的波纹颜色，但我似乎无法让它以任何方式工作。我现在一直在努力研究如何手动更改 <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; }

Angular 17 中的 NG 块 UI

我尝试在 Angular 17 中使用 NG Block UI 并收到此错误 ng block ui error in Angular 17 知道这个模块在 Angular 17 中如何工作吗？提前致谢我使用 npm i ng-

如何使用旧的 angularJS 1.5.5 应用程序

我必须使用旧的 AngularJS 1.5.5 应用程序进行维护，但我不知道如何为其设置一个好的环境。我应该安装哪个版本的 NodeJS/NPM 才能使其与 gulp 一起工作......

在 codeigniter 中启用 cors（restserver by @chriskacerguis）

http.get 请求工作正常。当 api 移动到服务器时，出现了问题。客户端使用 angularJs $http.get('http://example.com...

无需封闭标签的角度内容投影

有没有一种方法可以实现不包含标签的内容投影？这是我的组件：有没有一种方法可以实现不包含标签的内容投影？这是我的组件： <div class="flex flex-column container"> <div class="flex flex-column header"> <ng-content select="[header]"></ng-content> </div> <div class="flex flex-column body"> <ng-content></ng-content> </div> <div class="flex flex-column footer"> <ng-content select="[footer]"></ng-content> </div> </div> 请注意，有两个可能的插槽 header 和 footer。这些组件应该这样使用： <div header>Header</div> Body <div footer>Footer</div> 如果没有这个div我该如何使用这个组件？我的意思是，我只想添加内容，因为如果我添加 div，它可能会破坏布局。您可以尝试在 ngProjectAs 标签上使用 ng-container 属性： <ng-container ngProjectAs="[header]">Header</ng-container> Body <ng-container ngProjectAs="[footer]">Footer</ng-container> 更多相关内容请参见 Angular 文档

如何在 Ng Prime 菜单栏中设置菜单项的样式？

我刚刚开始使用 ng prime，我使用了 p 菜单栏这是组件文件：这个.items = [ { 标签：“第一项...

Angularjs 和关系数据库

我一直在开发一个网络应用程序，它将显示论坛主题。现在我的问题是我无法在每个主题回复中显示用户名。这是我的 MER 现在最重要的部分是角色（用户）是

Angular“ng 生成组件”复制组件

由于某种原因，自从从 Angular 13 升级到 Angular 15 后，当我输入： ng g c 某些组件 Angular 复制组件，创建重复文件。这种情况 100% 都会发生。第二次...

使用 :host ::ng-deep 设置 CSS 角色到角度组件 CSS 不起作用？

尝试使用以下方法设置角度组件的 CSS prop :host ::ng-deep .p-dropdown-panel { 变换原点：中心底部！重要；顶部：-119px！重要；左：0！重要； } ...

：主机 ::ng-deep 未将样式应用于材质复选框

我正在尝试为材质多选做一个简单的复选框背景颜色更改。我尝试过两者都做 .mat-pseudo-checkbox-checked { 背景颜色：#a9a9a9 ！重要； } 和 :主持人::ng-de...

运行 ionicserve 我收到此错误：“[错误] ng 意外关闭（退出代码 127）。”

我正在尝试在我的 Mac 上运行 ionic 应用程序。当我运行 npm install 来安装依赖项时，一切正常，没有任何问题。但是当我运行 ionicserve 或 ionics 时，我收到此错误 [ng] 沃...

将嵌套元素放入 ng-content

我尝试用一个获得所有。一个直接位于父元素的根 DOM 中，另一个位于内部帕...

如何让新的 Angular 17 项目运行？

全新安装 Nodejs (20.10.0) 和 Angular (17.0.8)。新项目（“ng new Default”），没有文件更改。 “ngserve”没有错误，但浏览器控制台显示： main.ts:5 错误

Angular 项目不适用于@babylonjs/viewer

我在全球安装了@Angular/[email protected]。我使用命令行“ng new BabylonTest --routing false --style css --skip-git --skip-tests”创建了一个 Angular 项目。 CD 到文件夹“Babyl...

如何以数组形式提交，只有id。使用 Angular 7 和 ng-multiselect-dropdown

我提交此表格：让 newRole = this.addForm.value console.log(this.addForm) 形式如图所示：当我把 console.log(this.addForm.value) 显示为我只想提交

Angular 12：Firebase 模块未正确提供（？）

第一次使用Firebase，所以我不知道发生了什么。我没有修改使用 ng add @angular/fire 获得的配置，所以我的 AppModule 中的内容是： @NgModule({ 声明：[

Angular 材质选项卡 - 响应式选项卡更改

我在 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 叉子链接

角度 *ngIf; else 在异步上，当未定义是来自 Observable 的有效值时

我正在尝试使用 *ngIf; else 上的可观察对象可以发出未定义的信号。这是我所拥有的我正在尝试使用 *ngIf; else 上的可观察对象可以发出未定义的信号。这是我有的 <span *ngIf="(content$ | async) as content; else loading"> <span *ngIf="content != undefined; else notFound"> // show content </span> </span> 问题在于，如果observable的值未定义，页面会一直显示#loading，并且不会切换到#notFound 有没有办法接受 undefined（可以改为 null）作为有效的输出值，并让 UI 在不同阶段显示相应的部分？因为 Boolean(undefined) 的计算结果为 false，内部条件 content !== undefined 始终为 true 并且 notFound 永远不会加载。您将需要更改您的应用程序逻辑。处理此类场景的最简单方法似乎是使用 ngrxLet ： <ng-container *ngrxLet="content$ as content; suspenseTpl: loading"> <span *ngIf="!content"> <h2>Not found!</h2> </span> <span *ngIf="content"> {{ content }} </span> </ng-container> <ng-template #loading> Loading... </ng-template>

PrimeNg 选项卡视图选项卡选择

在 prime ng 的 tabview 文档的可关闭部分中，我看到当我删除最后一个选项卡时，它会转到第一个选项卡。我的问题是：我怎样才能让它转到左侧的选项卡而不是......

向垫子表添加额外的行

所以我有一张垫子桌所以我有一张垫子桌 <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>

更改动态表单控制角度的值

我有这个动态表单控件我有这个动态表单控件 <form [formGroup]="dynamicFormGroup" (ngSubmit)="onSubmit()" > <div class="row" formArrayName="address" *ngFor="let fields of AddressInfo.controls; let i = index"> <ng-container [formGroupName]="i"> <input type="number" class="form-control height-reset" placeholder="Enter Mobile" name="mobile" formControlName="mobile" /> .. </form> 当我尝试更改字段的值时 this.dynamicFormGroup.controls['mobile'].setValue(''); 或 this.dynamicFormGroup.patchValue({ mobile: '444' }); 该值未更新任何解决方案谢谢我认为问题在于您在 formGroup 内的 FormArray 内使用 FormControl。（只需查看简短的代码片段即可）所以你的代码应该看起来像这样； this.dynamicFormGroup.controls[index].controls['mobile'].setValue(''); <ng-container [formGroupName]="i">也可能会破坏它。我建议修改表格的结构，然后找到每个表格的正确“路径”。就您而言，不清楚 AddressInfo 是什么。相反，将您的代码更改为： <div class="row" formArrayName="address" *ngFor="let fields of addressFormArray.controls; let i = index"> <ng-container [formGroupName]="i"> <input type="number" class="form-control height-reset" placeholder="Enter Mobile" name="mobile" formControlName="mobile"> </ng-container> </div> get addressFormArray() { return this.formMain.get('address') as FormArray; } 用户现在可以添加值。如果您计划以编程方式编辑该值，则 this.dynamicFormGroup.controls['mobile'].setValue(''); 将不起作用，因为 mobile 是 FormArray 中的 FormControl。然后，要么循环遍历该数组以更改所有值，要么必须澄清应该更改哪个值。

即使在 Angular 中禁用按钮也能调用方法

我有一个按钮，根据 Angular 中的某些条件被禁用。即使按钮被禁用，我也想启用 onclick 功能。请找到以下代码：我有一个按钮，根据 Angular 中的某些条件被禁用。即使按钮被禁用，我也想启用 onclick 功能。请找到以下代码： <button *ngIf="overrideSplitByAccountEnabled && (!overrideSplitByaccountListOfAcc && !overrideSplitByAccountGroupValue) || ((isStartTimeInputPresent && !isValidStartTimestamp) || (isEndTimeInputPresent && !isValidEndTimestamp))" type="button" class="btn btn-primary" (click)="validateCustomReRunParameters()" disabled> <i class="glyphicon glyphicon-send" ></i> Send action </button> 即使按钮被禁用，我也想启用单击validateCustomReRunParameters() 我尝试单击，但由于按钮被禁用而无法工作。您可以将 div 包裹在 button 周围，并将单击事件附加到该 div。如果禁用该按钮，包装器 div 将采用 button 的宽度和高度。当用户点击禁用的 button 时，将触发 div 事件。如果启用 button，div 的宽度和高度将设置为 0。像这样的东西： <div (click)="validateCustomReRunParameters()"> <button *ngIf="overrideSplitByAccountEnabled && (!overrideSplitByaccountListOfAcc && !overrideSplitByAccountGroupValue) || ((isStartTimeInputPresent && !isValidStartTimestamp) || (isEndTimeInputPresent && !isValidEndTimestamp))" type="button" class="btn btn-primary" (click)="validateCustomReRunParameters()" disabled> <i class="glyphicon glyphicon-send" ></i> Send action </button> </div>

何时切换搜索栏和徽标下降？

.navbar { 背景颜色：#F91F46； } .src-bar { 边框：0；边框半径：5px；概要：无；左内边距：15px；宽度：30vw； } .navbar { background-color: #F91F46; } .src-bar { border: 0; border-radius: 5px; outline: none; padding-left: 15px; width: 30vw; } <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" integrity="sha512-b2QcS5SsA8tZodcDtGRELiGv5SaKSk1vDHDaQRda0htPYWZ6046lr3kJ5bAAQdpV2mmA/4v0wQF9MyU6/pDIAg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.min.js" integrity="sha512-WW8/jxkELe2CAiE4LvQfwm1rajOS8PHasCCx+knHG0gBHt8EXxS6T6tJRTGuDQVnluuAvMxWF4j8SNFDKceLFg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <nav class="navbar navbar-expand-md fixed-top"> <div class="container-fluid"> <a class="navbar-brand ms-3" href="#"> <img src="img/Logo.avif" width="40px" class="d-inline-block" /> </a> <form role="search" class="search-bar"> <div class="input-group"> <input class="src-bar" type="search" placeholder="Search For Products" /> <button class="btn bg-white" type="submit"> <i class="fa fa-search"></i> </button> </div> </form> <div class="justify-content-end"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav-colps" aria-controls="nav-colps" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="nav-colps"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li> <hr class="dropdown-divider" /> </li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> </div> </div> </div> </nav> 切换时，我希望折叠 div 居中。我知道原因 - 我将折叠和切换 btn 放在 justify-end div 内，因为我需要切换 btn 位置位于右侧。现在，当切换时，我的折叠位于右侧，但我希望在切换时，折叠div到中心。当我删除 justify-end div 时，它位于左侧，但如果删除它，每个导航元素都会移动到 nav 和 md 视图中 lg 的左侧。看起来像这样或中心我们确实需要将 .nav-collapse 移到 justify-end 元素之外，才能在较窄的视口上获得所需的布局。要将菜单显示在右侧，请通过 flex-grow: 1 类将 .nav-collapse 应用于 flex-grow: 0 元素，覆盖 flex-grow-0 上的默认 .nav-collapse。为了使窄视口的链接元素居中，.navbar-nav中的元素采用垂直柔性布局，因此我们可以通过align-items: center类应用align-items-center： .navbar { background-color: #F91F46; } .src-bar { border: 0; border-radius: 5px; outline: none; padding-left: 15px; width: 30vw; } <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" integrity="sha512-b2QcS5SsA8tZodcDtGRELiGv5SaKSk1vDHDaQRda0htPYWZ6046lr3kJ5bAAQdpV2mmA/4v0wQF9MyU6/pDIAg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.min.js" integrity="sha512-WW8/jxkELe2CAiE4LvQfwm1rajOS8PHasCCx+knHG0gBHt8EXxS6T6tJRTGuDQVnluuAvMxWF4j8SNFDKceLFg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <nav class="navbar navbar-expand-md fixed-top"> <div class="container-fluid"> <a class="navbar-brand ms-3" href="#"> <img src="https://picsum.photos/40/40" width="40px" class="d-inline-block" /> </a> <form role="search" class="search-bar"> <div class="input-group"> <input class="src-bar" type="search" placeholder="Search For Products" /> <button class="btn bg-white" type="submit"> <i class="fa fa-search"></i> </button> </div> </form> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav-colps" aria-controls="nav-colps" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse flex-grow-0" id="nav-colps"> <ul class="navbar-nav me-auto mb-2 mb-lg-0 align-items-center"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li> <hr class="dropdown-divider" /> </li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> </div> </div> </nav> 您还可以考虑通过 text-align: center 类应用 text-center，将链接元素 text 居中： .navbar { background-color: #F91F46; } .src-bar { border: 0; border-radius: 5px; outline: none; padding-left: 15px; width: 30vw; } <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" integrity="sha512-b2QcS5SsA8tZodcDtGRELiGv5SaKSk1vDHDaQRda0htPYWZ6046lr3kJ5bAAQdpV2mmA/4v0wQF9MyU6/pDIAg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.min.js" integrity="sha512-WW8/jxkELe2CAiE4LvQfwm1rajOS8PHasCCx+knHG0gBHt8EXxS6T6tJRTGuDQVnluuAvMxWF4j8SNFDKceLFg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <nav class="navbar navbar-expand-md fixed-top"> <div class="container-fluid"> <a class="navbar-brand ms-3" href="#"> <img src="https://picsum.photos/40/40" width="40px" class="d-inline-block" /> </a> <form role="search" class="search-bar"> <div class="input-group"> <input class="src-bar" type="search" placeholder="Search For Products" /> <button class="btn bg-white" type="submit"> <i class="fa fa-search"></i> </button> </div> </form> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav-colps" aria-controls="nav-colps" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse flex-grow-0" id="nav-colps"> <ul class="navbar-nav me-auto mb-2 mb-lg-0 text-center"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li> <hr class="dropdown-divider" /> </li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> </div> </div> </nav>

ng-multiselect-dropdown 在选择下拉列表中的第二个项目时关闭

在这个下拉菜单中，选择第一个项目（pune）后，当我单击第二个项目（新德里）进行选择时，下拉菜单被关闭，它是多选下拉菜单。以下是我的设置下拉设置= {

如何解决奇数编号的 Node.js 版本不会进入 LTS 状态且不应用于生产节点：16120 UnhandledPromiseRejectionWarning

我尝试创建一个新的角度应用程序ng新应用程序，但出现此错误检测到 Node.js 版本 v11.0.0。奇数编号的 Node.js 版本不会进入 LTS 状态，并且不应用于产品...

获取不可编辑、灰色但内容可选的输入元素

我有和元素，其内容在某些步骤中不应可编辑。因此，最初我向这些元素添加了一个禁用属性。元素</desc> <question vote="0"> <p>我有 <pre><code><input type="text"></code></pre> 和 <pre><code><textarea></code></pre> 元素，其内容在某些步骤中不应可编辑。</p> <p>所以，最初我为这些元素添加了 <pre><code>disabled</code></pre> 属性。这些元素变得不可编辑并且呈灰色。这个行为很好。</p> <p>但是，它们的内容应该是可选择的，而 <pre><code>disabled</code></pre> 属性避免了这种情况。所以我切换到了 <pre><code>readonly</code></pre> 属性。元素仍然不可编辑，内容可以选择，但不再是灰色的。</p> <p>因此，我正在寻找一种解决方案来包含以下元素：不可编辑、可选择和灰显。</p> <ul> <li>我可以应用一些 CSS，但我更喜欢禁用输入的本机浏览器样式。</li> <li>这些元素不是<pre><code><form></code></pre>的一部分，因此无需担心表单提交。</li> </ul> </question> <answer tick="false" vote="0"> <p>要在不使用disabled属性的情况下实现具有不可编辑、可选择和灰显元素的所需行为，您可以使用CSS和readonly属性的组合。您可以设置只读元素的样式，使其看起来像已禁用，同时保留选择其内容的能力。以下是如何实现此目标的示例：</p> <pre><code>input[readonly], textarea[readonly] { color: #777; /* Set text color to a muted color */ background-color: #eee; /* Set background color to a light grey */ cursor: not-allowed; /* Show a not-allowed cursor to indicate non editable state */ } /* Adjust the style for textareas, if needed */ textarea[readonly] { resize: none; /* Disable textarea resizing */ } </code></pre> <pre><code> <input type="text" readonly> <textarea readonly></textarea> </code></pre> </answer> </body></html>

如何使用 Bootstrap 5 禁用自定义范围而不更改样式？

我有范围：我有范围： <!DOCTYPE html> <html lang="en"> <head>  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" /> </head> <body> <div class="container mb-4 col-sm-5"> <input type="range" class="custom-range" min="0" max="10" value="10" id="range-input" style="width: 100%"> </div> </body> </html> 我想禁用它（它应该仍然看起来一样，但用户不能再与它交互），但是不改变样式。例如：图中，顶部的启用，底部的禁用；我想禁用它，同时保持顶级范围的样式。我尝试手动重新创建原始样式，但没有成功： <!DOCTYPE html> <html lang="en"> <head>  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" /> <style> input[type=range]:disabled { background-color: blue; color: blue; background: blue; } </style> </head> <body> <div class="container mb-4 col-sm-5"> <input type="range" class="custom-range" min="0" max="10" value="10" id="range-input" style="width: 100%" disabled> </div> </body> </html> 除此之外，我在研究中找不到任何其他可能的解决方案。您实际上需要“如何”禁用它？设置 pointer-events: none 并添加 tabindex="-1"，你会得到一个看起来仍然相同的元素，但用户无法再与之交互（至少通过鼠标单击/点击，并且他们无法通过键盘将其聚焦）控制其中之一 - 不确定是否还有其他什么？）由于没有设置 name 属性，该字段不会成为表单提交数据集的一部分 - 如果在您的实际用例中有所不同，您也可以删除（并重新设置）名称，当您可以打开和关闭 tabindex。

ng-bootstrap 滚动间谍在没有高度的情况下无法工作？

我在我的项目中使用 ng-bootstrap [ngbScrollSpy] 指令，如文档中所述，但它不起作用 - 滚动时活动项目不会改变。我的代码如下：我在我的项目中使用 ng-bootstrap [ngbScrollSpy] 指令，如文档中所述，但它不起作用 - 滚动时活动项目不会改变。我的代码如下： <div> <div class="sticky-top"> <ul class="nav menu-sidebar"> <li > <a [ngbScrollSpyItem]="[spy, 'about']">About</a> </li> <li > <a [ngbScrollSpyItem]="spy" fragment="schedule">Schedule</a> </li> <li > <a [ngbScrollSpyItem]="spy" fragment="hotel">Information about the hotel</a> </li> </ul> </div> <div ngbScrollSpy #spy="ngbScrollSpy" > <section ngbScrollSpyFragment="about"> <h3>About</h3> <p>{{some long long text and content}}</p> </section> <section ngbScrollSpyFragment="schedule"> <h3>Schedule</h3> <p>{{some long long text and content}}</p> </section> <section ngbScrollSpyFragment="hotel"> <h3>Information about the hotel</h3> <p>{{some long long text and content}}</p> </section> </div> </div> 我在这个 stackoverflow 问题中看到，我的问题是我没有向我的 div 提供 height，这是事实。但我的滚动间谍部分遍布整个页面，而不是一个小 div，（导航本身是 sticky-top）。所以我不能给它高度。我知道有替代方法 - 刷新窗口滚动上的滚动间谍，但我没有找到可以帮助我的正确代码。你能解决我的问题吗？为我提供刷新滚动间谍的代码/给我有关高度的提示/帮助我找到另一个相应的元素。非常感谢！附上 stackblitz 演示的链接注意：我使用来自 @ng-bootstrap/ng-bootstrap 的 NgbScrollSpy （我想它是非常相似的库）我做什么：我将所有内容（包括导航）包装在中 <div class="wrapper" ngbScrollSpy #spy="ngbScrollSpy" rootMargin="2px" [threshold]="1.0" > <div class="sticky-top pt-4 pb-4 bg-white"> ..here the navigation... </div> ..here the sections... <section ngbScrollSpyFragment="about"> </section> //the last I use margin-bottom:2rem; <section ngbScrollSpyFragment="hotel" style="margin-bottom:10rem" </section> </div> 见“门槛”。这表明“更改”活动片段应该可见的百分比（1 是 100%）包装类 .wrapper{ height:100%; position: absolute; top:0; } 我使用强制链接的类别 //remove all the class for the link a{ color:black; text-decoration:none; padding:8px 16px; } a.custom-active{ color:white; background-color:royalblue } 以及我使用的每个链接 <a [class.custom-active]="spy.active=='about'">About</a> 嗯，问题是如何“滚动到”。 “链接”应该作为链接使用。第一个是指示“路由器”应该考虑“碎片” 如果我们的组件是独立组件，我们需要使用提供者，provideRouter bootstrapApplication(App, { providers: [ provideRouter([], withInMemoryScrolling({anchorScrolling:'enabled'})), ] }) 然后，我们需要考虑到我们的页面确实没有滚动，div“包装器”是谁拥有滚动。因此，我们订阅 router.events，当事件有“锚点”时，我们滚动“包装器”div constructor(router: Router) { router.events.pipe(filter((e:any) => e.anchor)).subscribe((e: any) => { (document.getElementById('wrapper') as any).scrollTop+= (document.getElementById(e.anchor)?.getBoundingClientRect().top||0) -72; //<--this is the offset }); } 在这个stactblitz中你有一个有效的例子

如果类型是从变量进行数据绑定，则通过 <object> 标签在 Angular 中显示 pdf 无法在 Chrome 中工作

我正在尝试通过标签在 Chrome 中显示 pdf。如果我手动编写类型，它会起作用：不工作但是... 我正在尝试通过 <object> 标签在 Chrome 中显示 pdf。如果我手动写 type: 就可以了 <object [data]="getUrl(true)" type="application/pdf"> Not working </object> 但如果我从变量读取类型则不会： <object [data]="getUrl(true)" [type]="file.mimeType"> Not working </object> 为什么？这是一些非常奇怪的错误，还是我做错了什么可怕的事情。这里是plunkr。它可以在 Firefox 中运行（所有 4 个对象都会显示），但不能在 Chrome 中运行 (Version 74.0.3729.169 (Official Build) (64-bit))：我遇到了同样的问题，但我不明白原因。就我而言，我决定在基于 Blink 引擎的浏览器中使用“embed”元素而不是“object”元素。 <ng-template #blinkPlatformViewer> <embed [src]="getUrl(true)" [type]="file.mimeType"/> </ng-template> <object *ngIf="!isBlinkPlatform; else blinkPlatformViewer" [data]="getUrl(true)" [type]="file.mimeType"> Not working </object> import { Platform } from '@angular/cdk/platform'; import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'; export class FileContentComponent { constructor(private readonly sanitizer: DomSanitizer, private readonly platform: Platform) { } get isBlinkPlatform(): boolean { return this.platform.BLINK; } }

在 Angular 中打开模态时出现ExpressionChangedAfterItHasBeenCheckedError

` `<ngx-datatable-column *ngIf="search_type ==='booking'" [width]="50" [sortable]="false" [canAutoResize]="false" [draggable]="false" [resizeable]="false"> <ng-template ngx-datatable-cell-template let-row="row" let-value="value"> <span class="fa fa-user-plus font-medium-3 text-primary cursor-pointer pl-1" (click)="onUpdateBookingLinguist(row)"></span> </ng-template> </ngx-datatable-column>` 上面是我的html代码，下面是我的ts代码 ` onUpdateBookingLinguist(linguist: Linguist) { const modalRef = this.modalService.open(ScheduledBookingModalComponent, { size: 'lg' }); modalRef.componentInstance.linguist_other_bookings = linguist['scheduled_booking']; modalRef.result.then((result) => { if (!result) { return; } this.cdr.detectChanges(); }).catch((e) => { }); this.cdr.detectChanges(); }` 我试图从 ngx-datatable-column 打开模式，但收到此错误错误错误：NG0100：ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改。上一个值：“datatable-body-cell sort-active active”。当前值：'datatable-body-cell sort-active'.. 欲了解更多信息，请访问 https://angular.io/errors/NG0100 我尝试使用 ChangeDetectorRef.detectChanges() 手动触发更改检测，但仍然收到错误。当您修改 Angular 在其更改检测周期期间也尝试检查或更新的属性时，通常会出现此错误。因此您可以使用 ChangeDetectorRef 在特定情况下手动触发更改检测。通过从 ChangeDetectorRef 调用 detectorChanges()，您可以手动指示 Angular 对该组件及其子组件重新运行更改检测，从而可能解决问题这是如何在组件中使用ChangeDetectorRef 的示例构造函数（私有 cdr：ChangeDetectorRef）{} ngAfterContentChecked() { this.cdr.detectChanges(); }

NG8001：“app-welcome”不是已知元素：

我的 Angular 应用程序遇到问题，收到错误 8001。我不知道如何处理它。谁能帮我这个？谢谢你！应用程序组件.html {{标题}}&l... 我的 Angular 应用程序遇到问题，收到错误 8001。我不知道如何处理它。谁能帮我这个？谢谢！ app.component.html <h1>{{ title }}</h1> <p>Congratulations! Your app is running. 🎉</p> <app-welcome></app-welcome> app.component.ts import { Component } from '@angular/core'; import { CommonModule } from '@angular/common'; import { RouterOutlet } from '@angular/router'; @Component({ selector: 'app-root', standalone: true, imports: [CommonModule, RouterOutlet], templateUrl: './app.component.html', styleUrl: './app.component.css' }) export class AppComponent { title = 'XYZCARS'; } welcome.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-welcome', templateUrl: './welcome.component.html', styleUrl: './welcome.component.css' }) export class WelcomeComponent { car = 'toyota'; } 我的项目最初没有 app.module.ts 文件。我自己添加了它并根据网上找到的一些信息进行了配置，但问题仍然存在并且仍未解决。谁能帮我解决这个问题吗？ app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { WelcomeComponent } from './welcome/welcome.component'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent, WelcomeComponent ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } 如果您正在 Angular 17 中创建项目->使用这些命令 ng app --no-standalone 然后你就得到了 app.module.ts 文件。

NextJS 中 useFormStatus() 始终为 false

我尝试使用 useFormStatus() 在提交表单并等待获取数据时动态更改 UI。我有一个像这样的表单组件函数 onSubmit(数据：z.infer 我正在尝试使用 useFormStatus() 在提交表单并等待获取数据时动态更改 UI。我有一个像这样的表单组件 function onSubmit(data: z.infer<typeof FormSchema>) { requestImg(data).then((imageStringify) => { const binaryData = Buffer.from(imageStringify.image); const imageBase64 = URL.createObjectURL( new Blob([binaryData.buffer], { type: "image/jpeg" } /* (1) */) ); setOpen(true); setSource(imageBase64); }); } if (isDesktop) { return ( <Form {...form}> <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6" > ... 其中 requestImg(data) 是服务器操作。然后，我将 Button 组件嵌套在不同的 Button.tsx 文件中的 <form> 中 import { useFormStatus } from "react-dom"; import { Button } from "@/components/ui/button"; export default function ButtonSub() { const { pending } = useFormStatus(); console.log(pending); return ( <Button className="w-full" type="submit" aria-disabled={pending}> {pending ? "Processing..." : "Submit"} </Button> ); } 问题是，当我单击提交时，按钮文本不会更改为“正在处理...” 编辑似乎仅当您在表单上使用操作关键字时才有效。我试过了 <form action={async (formData: FormData) => { requestImg(formData).then((imageStringify) => { const binaryData = Buffer.from(imageStringify.image); const imageBase64 = URL.createObjectURL( new Blob([binaryData.buffer], { type: "image/jpeg" } /* (1) */) ); setSource(imageBase64); setOpen(true); }); }} className="w-2/3 space-y-6" > 但是现在使用 byte8Array 生成的图像已损坏。我有一个带有动态 src 的图像，其中充满了 const [source, setSource] = useState(""); <img src={source}/> 似乎只有在您使用 action 关键字时才有效形式。确实如此。 useFormStatus 必须在表单的子组件内使用，它可以监视服务器操作的状态变化。但据我所知，它会监听 action。 action 定义提交后表单数据的服务器端目的地。在服务器操作的上下文中，服务器操作向当前 URL 发出 post 请求。所以它没有监听表单 onSubmit，这就是为什么你的第一个代码执行不起作用。现在服务器操作在服务器上下文中运行，它们在服务器上执行，但setState是客户端特定的代码

Pinia 对象在 Vue 中的 foreach 后失去反应性

我有这个嵌套的foreach BalanceItemList.vue ... 我有这个嵌套的 foreach BalanceItemList.vue <template> <div v-for="category in categoryItemsStore.balanceCategories" :key="category.id" class="mt-5"> <div class="border-black border-b bg-gray-200"> <span class="font-bold w-full">{{ category.name }}</span> </div> <div v-for="balanceItem in category.balance_items" :key="balanceItem.id"> {{ balanceItem.total = 500 }} <balance-item :balance-item="balanceItem" @update-balance-item="update"/> </div> <div> <balance-item-create :category="category.id" @create-balance-item="update"/> </div> <div v-if="categoryItemsStore.totals[category.id]" class="grid grid-cols-4-b t-2 ml-2"> <div :class="category.is_positive ? '': 'text-red-600' " class="col-start-4 border-t-2 border-black font-bold"> €{{ categoryItemsStore.totals[category.id].total }} </div> </div> </div> </template> 我像这样检查了“balanceItem”的反应性 {{ balanceItem.total = 500 }} 它在商店中更新，但随后我有了我的平衡项目组件： BalanceItem.vue <script setup> import {reactive} from "vue"; import {useForm} from "@inertiajs/vue3"; import NumberInput from "@/Components/NumberInput.vue"; import {UseCategoryItemsStore} from "@/Stores/UseCategoryItemsStore.js"; const categoryItemStore = UseCategoryItemsStore() const props = defineProps({balanceItem: Object, errors: Object}) let item = reactive(props.balanceItem); const form = useForm(item); const emit = defineEmits(['update-balance-item']) const submit = () => { form.post(route('balance-item.update'), { preserveScroll: true, onSuccess: () => { props.balanceItem.total = 500 categoryItemStore.updateBalanceItemsTotals(form) emit('update-balance-item') } }) } </script> <template> <form @submit.prevent="submit"> <div class="grid grid-cols-4-b"> <span>{{ item.name }}</span> <NumberInput v-model="form.count" autofocus class=" mr-4 mt-1 block" type="number" @update:model-value="submit" /> <div :class="item.item_category.is_positive ? '' : 'text-red-600'" class="flex place-items-center"> <div class="pt-1 mr-1">€</div> <NumberInput v-model="form.amount" :class="form.errors.amount ? 'border-red-600' : ''" autofocus class="mt-1 mr-4 w-5/6" type="text" @update:model-value="submit" /> </div> <div :class="item.item_category.is_positive ? '' : 'text-red-600'" class="flex place-items-center"> <div class="pt-1 mr-1 w-5/6">€</div> <NumberInput v-model="form.total" autofocus class="mt-1 block" disabled style="max-width: 95%" type="text" /> </div> </div> </form> </template> 这是我测试反应性的商店。如果我增加输入的数字，则项目的计数保持不变 UseCategoryItemsStore.js import {defineStore} from "pinia"; import {ref} from "vue"; export const UseCategoryItemsStore = defineStore('UseCategoryItemsStore', () => { const balanceCategories = ref([]) const totals = ref([]) function getBalanceItems() { axios.get(route('balance-item.index')).then((response) => { balanceCategories.value = response.data // console.log(balanceCategories.value) }) } function getTotals() { axios.get(route('balance-item.totals')).then((response) => totals.value = response.data) } function getData() { getTotals() getBalanceItems() } function updateBalanceItemsTotals(selectedItem) { balanceCategories.value.forEach((category) => { category.balance_items.forEach((item) => { if (item.id === selectedItem.id) { // item.total = item.count * item.amount console.log(item) } }) }) } getTotals() getBalanceItems() return {balanceCategories, totals, getBalanceItems, getTotals, getData, updateBalanceItemsTotals} }) 在此测试中，我执行“props.balanceItem.total = 500”。但如果我检查商店，它不会更新。看来将“balanceItem”分配给一个道具会失去与我的 Pinia 商店的反应性。我可以使用“form.total = form.count * form.amount”手动更新我的表单，但这对我来说似乎很老套，我想使用 Pinia 商店的反应性。我考虑过根据“BalanceItem”获取 Pina 项目，但这似乎也很棘手。谁知道为什么失去反应性？我有laravel 10.39、vue3.2.41和pinia 2.1.17惯性0.6.11。到目前为止我知道的所有最新版本。我像这样更新我的表格和商店： <script setup> import {useForm} from "@inertiajs/vue3"; import NumberInput from "@/Components/NumberInput.vue"; import {UseCategoryItemsStore} from "@/Stores/UseCategoryItemsStore.js"; const categoryItemStore = UseCategoryItemsStore() const props = defineProps({balanceItem: Object, errors: Object}) let item = categoryItemStore.getItemById(props.balanceItem); let form = useForm(item); const emit = defineEmits(['update-balance-item']) const submit = () => { form.post(route('balance-item.update'), { preserveScroll: true, onSuccess: () => { item = categoryItemStore.updateItem(form) form = useForm(item) emit('update-balance-item') } }) } </script> 我将此功能添加到我的商店： import {defineStore} from "pinia"; import {ref} from "vue"; export const UseCategoryItemsStore = defineStore('UseCategoryItemsStore', () => { const balanceCategories = ref([]) const totals = ref([]) function getBalanceItems() { axios.get(route('balance-item.index')).then((response) => { balanceCategories.value = response.data // console.log(balanceCategories.value) }) } function getItemById(item) { let category = balanceCategories.value.find((category) => { return category.id === item.item_category_id }) return category.balance_items.find((item_from_store) => { return item_from_store.id === item.id }) } function updateItem(form) { const item = getItemById(form) item.count = form.count item.amount = form.amount item.total = item.count * item.amount return item } function getTotals() { axios.get(route('balance-item.totals')).then((response) => totals.value = response.data) } function getData() { getTotals() getBalanceItems() } getTotals() getBalanceItems() return {balanceCategories, totals, getBalanceItems, getTotals, getData, getItemById, updateItem} }) 假设如果帖子获得 200，我的表单值可用于更新商店和更新表单。这是我能想到的最好的

用 Bootsrap 制作的网站右侧的空间不会消失吗？

无论我做什么，我用 Bootsrap 制作的网站右侧的空白都没有消失。如果有解决办法请告诉我无论我做什么，我用 Bootsrap 制作的网站右侧的空白都没有消失。如果有解决办法请告诉我 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Contact | Enba Camping</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> <link rel="stylesheet" href="style/style.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> </head> <body> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>  <div class="container-fluid"> <div class="row"> <div class="col-sm-12 p-0"> <nav class="navbar navbar-expand-lg bg-body-tertiary p-0 "> <div class="container-fluid bg-dark "> <a class="navbar-brand text-light mb-2" href="index.html">Enba Camping</a> <button class="navbar-toggler btn btn-light btn btn-outline-light bg-light m-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon "></span> </button> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="navbar-nav ms-auto"> <a class="nav-link text-light text-center" aria-current="page" href="index.html">Home</a> <a class="nav-link text-light text-center" href="aboutus.html">About us</a> <a class="nav-link active text-light text-center" href="contact.html" aria-disabled="true">Contact</a> </div> </div> </div> </nav> </div> </div> </div>   <div class="container-fluid p-0 bg-dark text-light"> <div class="row"> <div class="col-sm-6 ps-0"> <img src="images/lesly-derksen-F4fH5dAfZnE-unsplash.jpg" alt="" class=" d-block w-100 c-img "> </div> <div class="col-sm-6 d-flex justify-content-center align-items-center "> <div class="text-center"> <h2 class="fw-bold display-4 ">Bize Ulaşın</h2>  <div class="mb-3"> <label for="exampleFormControlInput1" class="form-label">Adınız</label> <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Name"> </div> <div class="mb-3"> <label for="exampleFormControlInput1" class="form-label">Email Adres</label> <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Email Address"> </div> <div class="mb-3"> <label for="exampleFormControlTextarea1" class="form-label">Mesajınız</label> <textarea class="form-control" id="exampleFormControlTextarea1" placeholder="Message" rows="3"></textarea> </div> <div class=" gap-2 d-md-block "> <button class="btn btn-light " type="button">Send</button> </div> </div> </div> </div> </div>   <div class="container mt-sm-5"> <div class="row text-center "> <h1 class="d-flex justify-content-center">Mekanlarımız</h1> <hr> <div class="col-sm-4 mb-2"> <div class="card"> <img src="images/card2.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Orman İçi Karavan Parkı</h5> <p class="card-text">Ormanın içinde konumlanan karavan parkımız, tam anlamıyla bir doğa kaçamağı sunuyor. Ormanın huzurlu atmosferinde kendinizi kaybedin. Karavanınızla konforlu bir konaklama deneyimi yaşayın.</p> <a href="#" class="btn btn-dark">Rezervasyon için tıklayınız </a> </div> </div> </div> <div class="col-sm-4 mb-2"> <div class="card"> <img src="images/card3.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Orman İçi Çadırlı Kamp</h5> <p class="card-text">Orman içi çadırlı kamp alanımız, doğa severler için bir cennet. Gölgeli ağaçlar arasında konumlanan çadırlarımızda, kuş cıvıltıları ve huzur içinde bir konaklama deneyimi sizi bekliyor.</p> <a href="#" class="btn btn-dark">Rezervasyon için tıklayınız</a> </div> </div> </div> <div class="col-sm-4 mb-2"> <div class="card"> <img src="images/card1.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Dağ Evi </h5> <p class="card-text">Dağ evimiz, şehrin gürültüsünden uzak,huzurlu bir konaklama imkanı sunuyor. Ferah odalarımızda dağ manzarasının keyfini çıkarabilir, gölet kenarındaki aktivitelerle vakit geçirebilirsiniz.</p> <a href="#" class="btn btn-dark">Rezervasyon için tıklayınız</a> </div> </div> </div> </div> </div>   <div class="row my-4"> <div class="col-sm-12"> <h1 class="d-flex justify-content-center">Galeri</h1> <hr> </div> <div class="col-sm col-6 mb-1"><img src="images/galeri/hichem-meghachou-7I-Rj_E9ihI-unsplash.jpg" alt="" class="w-100 img-thumbnail"> </div> <div class="col-sm col-6 mb-1"><img src="images/galeri/jimmy-conover-J_XuXX9m0KM-unsplash.jpg" alt="" class="w-100 img-thumbnail"> </div> <div class="col-sm col-6 mb-1"><img src="images/galeri/josh-campbell-UbbjVyibFuc-unsplash.jpg" alt="" class="w-100 img-thumbnail"> </div> <div class="col-sm col-6 mb-1"><img src="images/galeri/shelby-cohron-ESNV6KmLJMg-unsplash.jpg" alt="" class="w-100 img-thumbnail"> </div> <div class="col-sm col-6 mb-1"><img src="images/galeri/tegan-mierle-fDostElVhN8-unsplash.jpg" alt="" class="w-100 img-thumbnail"> </div> <div class="col-sm col-6 mb-1"><img src="images/galeri/toa-heftiba-x9I-6yoXrXE-unsplash.jpg" alt="" class="w-100 img-thumbnail"> </div> </div>   <div class="bg-dark text-light"> <div class="container"> <footer class="pt-5 mt-5 "> <div class="row "> <div class="col-6 col-md-2 mb-3"> <h5>Section</h5> <ul class="nav flex-column "> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Home</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Features</a> </li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Pricing</a> </li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">FAQs</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">About</a> </li> </ul> </div> <div class="col-6 col-md-2 mb-3"> <h5>Section</h5> <ul class="nav flex-column"> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Home</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Features</a> </li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Pricing</a> </li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">FAQs</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">About</a> </li> </ul> </div> <div class="col-6 col-md-2 mb-3"> <h5>Section</h5> <ul class="nav flex-column"> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Home</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Features</a> </li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Pricing</a> </li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">FAQs</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">About</a> </li> </ul> </div> <div class="col-md-5 offset-md-1 mb-3"> <form> <h4> Abone Ol ve Doğanın Güzelliklerini Kaçırma!</h4> <p class="fs-6">Doğanın kucaklayıcı atmosferine adım atmak, huzurla dolu anlar yaşamak ve Enba Camping'in sunduğu özel fırsatları kaçırmamak için hemen abone ol! Sitemize abone olarak, doğanın gizemli güzellikleri, özel indirimler ve etkinliklerden ilk sen haberdar olacaksın.</p> <p class="fs-6"> Unutulmaz anılar biriktirmek ve doğanın kollarında huzurlu bir deneyim yaşamak için abone ol, Enba Camping'in eşsiz dünyasına adımını at! 🏕️✨ </p> <div class="d-flex flex-column flex-sm-row w-100 gap-2"> <label for="newsletter1" class="visually-hidden">Email address</label> <input id="newsletter1" type="text" class="form-control" placeholder="Email address"> <button class="btn btn-primary" type="button">Subscribe</button> </div> </form> </div> </div> <div class="d-flex flex-column flex-sm-row justify-content-between border-top"> <p>© 2023 Company, Inc. All rights reserved.</p> <ul class="list-unstyled d-flex"> <li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"> <use xlink:href="#twitter"></use> </svg></a></li> <li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"> <use xlink:href="#instagram"></use> </svg></a></li> <li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"> <use xlink:href="#facebook"></use> </svg></a></li> </ul> </div> </footer> </div> </div>  </body> </html> 和CSS .jumb { vertical-align: inherit; } p { font-size: 24px; } .c-item { height: 480px; } .c-img { height: 100%; object-fit: cover; filter:brightness(0.9) } 这里。我不希望页面左右移动。我想让它适合全屏，但容器结构溢出了请将这段代码添加到您的 CSS 文件中。然后，它就会起作用。 .row{ margin-right: 0px; }

angularjs-ng-disabled 相关问题

最新问题