- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我使用指令来启用和禁用表单。这是一个单独的 typescript 文件。代码如下:-
import { NgControl } from '@angular/forms';
import { Directive, Input } from '@angular/core';
@Directive({
selector: '[disableControl]'
})
export class DisableControlDirective {
@Input('disableControl') set disableControl( condition : boolean ) {
const action = condition ? 'disable' : 'enable';
this.ngControl.control[action]();
}
constructor (private ngControl : NgControl){}
}
HTML: -
<div class="card" *ngIf="commentsFormEnable">
<div class="card">
<h3 class="mb-0">
<button class="btn btn-primary btn-sm" aria-expanded="false">
Comments
</button>
</h3>
<form [formGroup]="commentsForm" data-target="comments" id="commentsForm" (ngSubmit)="onSubmit($event)">
<div class="row">
<div class="col">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Comments</span>
</div>
<textarea formControlName="comment" class="form-control" [disableControl]="comments" placeholder="Add a comment."></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col text-right">
<ng-container *ngIf="comments; else commentsbtnElseBlock">
<ng-container *ngTemplateOutlet="params;context:{btnId: 'comments', toggleValue: comments}"></ng-container>
</ng-container>
<ng-template #commentsbtnElseBlock>
<ng-container *ngTemplateOutlet="paramsElse;context:{btnId: 'comments', toggleValue: comments}"></ng-container>
</ng-template>
</div>
</div>
<div class="row">
<div class="col">
<div *ngFor="let commentData of commentsList; let i=index">
<div class="comment-list">
<div class="user-initial border rounded-circle">
{{commentData.UpdatedBy | slice:0:1}}
</div>
<div class="comment-info">
<ul>
<li class="ml-2 mr-2">
<span class="user-name">{{commentData.UpdatedBy}}</span>
</li>
<li>
<span>
<small>commented {{commentData.UpdatedDate | date:'medium'}}</small>
</span>
<!-- <i input type="checkbox" class="fas fa-trash-alt" id="{{commentData.RecordId}}" (change)=onChange($event) (click)="deleteCommentsEntity(i,project.ProjectId)"></i>-->
</li>
</ul>
</div>
<div class="ml-5 mb-5">
{{commentData.Comment}}
<!--<div class="project-desc" style="text-align:left; width:3080px">
<app-inline-edit [(ngModel)]=commentData.Comment label=commentData.Comment [required]="true" type="input" style="width:300px">
</app-inline-edit>
</div>-->
<button class="btn btn-pill btn-primary btn-sm mr-2" style="text-align:right;color:Tomato;margin-right:20px;float:right" type="button">
<i ng-mouseover="count = count + 1" ng-init="count=0" ng-show="Delete" id="{{commentData.RecordId}}" class="fas fa-trash-alt" style="text-align:right;" (click)="deleteCommentsEntity(commentData.RecordId,project.ProjectId)"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
我在这里担心的是上面的代码适用于以下包:-
"@angular/animations": "^8.0.2",
"@angular/common": "^8.0.2",
"@angular/compiler": "^8.0.2",
"@angular/core": "^8.0.2",
"@angular/forms": "^8.0.2",
"@angular/http": "^8.0.0-beta.10",
"@angular/platform-browser": "^8.0.2",
"@angular/platform-browser-dynamic": "^8.0.2",
"@angular/platform-server": "^8.2.11",
"@angular/router": "^8.0.2",
并且不使用:-
"@angular/animations": "^9.0.0-rc.12",
"@angular/common": "^9.0.0-rc.12",
"@angular/compiler": "^9.0.0-rc.12",
"@angular/core": "^9.0.0-rc.12",
"@angular/forms": "^9.0.0-rc.12",
"@angular/platform-browser": "^9.0.0-rc.12",
"@angular/platform-browser-dynamic": "^9.0.0-rc.12",
"@angular/platform-server": "^8.2.11",
"@angular/router": "^9.0.0-rc.12",
我收到这个错误 -
cannot read property 'disabled' of undefined at DisableControlDirective.set cannot read property 'disable' of undefined
会不会是版本升级的问题?我一无所知。请建议是否有任何方法可以解决此问题。
最佳答案
由于某种原因,angular 9 注入(inject)的 ngControl 无法正常工作,因为它在 angular 8 中正常工作,作为解决方法,您可以将 this.ngControl.controlaction 包装在 setTimeout 中
试试这个:
import { NgControl } from '@angular/forms';
import { Directive, Input } from '@angular/core';
@Directive({
selector: '[disableControl]'
})
export class DisableControlDirective {
@Input('appDisable') set disableControl( condition : boolean ) {
const action = condition ? 'disable' : 'enable';
setTimeout(()=>{
this.ngControl.control[action]();
});
}
constructor (private ngControl : NgControl){}
}
或者
您可以通过像这样在 ngOnChanges 中监听绑定(bind)更改来解决此问题
@Input('appDisable') disableControl;
ngOnChanges(changes) {
if (changes['disableControl']) {
const action = this.opDisabled ? 'disable' : 'enable';
this.ngControl.control[action]();
}
}
关于angular - 升级到 Angular 9 后,指令无法与 FormControl 一起使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60075561/
我几乎不敢在这里问这个问题,因为它似乎应该很容易通过谷歌或 ravendb.net 获得。但是,我一直很难找到将我的 RavenDB 升级到新版本的正确方法。我目前正在运行 573 版并希望升级到 6
这周我需要升级当前版本的 DNN。我目前使用的是 2.1.1。我不想每件事都做两次,所以,我有几个问题。 是否有升级工具或某些脚本可以帮助我进行升级。 我最好安装 4.9 还是 5.0。这是生产。 如
将 Sugarcrm 从 6.2 升级到 6.3 版本时遇到问题。当我升级本地 Sugarcrm 安装时,它可以工作,但是当我开始升级我的 Sugarcrm 6.2 站点并上传升级包时,它不会上传。
有没有办法绕过 Meteor 的自动更新功能?我坚持 Downloading meteor-tool@1.3.0_3... \ 当我尝试运行现有项目,或创建一个新项目或只是运行“
我已将应用内集成到我的 Andorid 应用程序中,用于单个产品 productone。 为此,我在我的 Google Play 控制台中创建了不同的产品 ID,如下所示: 1。 productone
我在将 TeamCity 版本 2017.1.1 升级到 2017.1.2 时遇到问题。这个问题涉及 TeamCity 和 PostgreSQL 的工作。我的工作: 停止 teamcity 进程 /e
我寻找了这个问题的具体答案,但找不到——即使是在 WAMPSERVER 网站上也是如此。我确定我忽略了它。 我有 Wampserver 2.0、MySQL 5.0.51b、PHP 5.2.6 和 Ap
我使用 Ubuntu 软件中心默认的 Eclipse 3.7。 我想将 Eclipse 升级到 kepler 版本,所以我添加了 repository 我收到以下错误消息: Cannot comple
你好 我只想安装 mercurial,但对于它需要 python 2.6 的所有版本,我尝试使用 .rpm 文件,但我唯一得到的是很多充满错误的行,它告诉我:需要安装在 2.6 之前和 2.5 之后的
我完全知道 Gradle 网站上有一些页面说明了如何升级,但仅限于 4.x 及更高版本。 我正在尝试关注 tutorial制作一个简单的“我的第一个”Minecraft 模组。在其中,您被告知安装 f
我们想升级 Kerberos(服务器和客户端) 当前:1.6.3-133.27.1 目标:1.6.3-133.49.97.1 问题是如果我们用包管理器升级它,下面会发生什么? KDC 数据库 所有主要
背景 原计划 2019 年发布的 Vue3,又经过一年的再次打磨,终于于去年 9 月正式发布。随后,不少 UI 组件库都积极参与适配,去年 12 月,Element-plus(
我有一个版本为 2.3.4 的 grails 项目,我需要尽可能升级到最新版本。查看文档我意识到从 2.x 到 3.x 有巨大的变化。 问题是:从 2 到 3、从 3 到 4、从 4 到 5 逐步升级
我正在将 API 项目从 .net5 升级到 .net6 它以前工作,现在它崩溃 内部异常消息“抛出了‘Unity.Exceptions.InvalidRegistrationException’类型
我将我的项目从 expo 44 升级到 expo 45,现在我有无数这样的错误: The module 'MaterialIcons' can't be used as JSX component.
我已经升级了掌 Helm 模板(手动) 以前的片段depoloyment.yaml : apiVersion: apps/v1beta2 kind: Deployment metadata: na
我正在尝试将我的 Scala Play Framework 应用程序升级到 2.8,这涉及将 SBT 升级到 1.x。 在我的 build.propeties 我有 sbt.version=1.3.5
我想在我的 Windows 服务器上安装 PHPUnit 3.7。我遵循了各种说明 here并以 PHPUnit 3.4.1 结束。当我尝试使用以下方法再次安装它时: pear update chan
Microsoft.Net 4.5 即将推出,我想在 MS 发布最终版本时升级我的 clickonce 应用程序。 我的问题是:已经安装了 clickonce 应用程序(使用 .net 4.0)的用户
为了将 Angular 8 更新到 9,我正在按照官方文档升级。 这建议首先更新到最新版本的 angular 8,例如: ng update @angular/core@8 @angular/cli@
我是一名优秀的程序员,十分优秀!