小编JGF*_*FMK的帖子

有条件地在Angular 2或4中使输入字​​段只读:建议+最佳/哪种方式

我试图回答别人的问题.在这样做的过程中,我意识到在一些事情上存在着相当多的不确定性.我希望有人可以提供关于编号点的反馈1..4:

任务:有条件地使输入字段只读

HTML的相关部分:

<input type="text" placeholder="Club Name" #clubName>
Run Code Online (Sandbox Code Playgroud)

将其添加到Typescript组件.

// class properties
@ViewChild('clubName')
inp:HTMLInputElement; // Could also use interface Element

// conditionally set in some other methods of class
inp.setAttribute('readonly', 'readonly');
inp.removeAttribute('readonly');
Run Code Online (Sandbox Code Playgroud)

不得不说这对我来说是个灰色地带.

  1. 引用HTMLInputElementElement直接使用@ViewChildAngular 2+是一种不好的做法吗?只是,我一直在使用经常看到的例子ElementRef或链接关闭以nativeElementElementRef.

由于VS Studio没有那些智能感,我突然觉得我在黑暗中编码.即,你永远不会得到关于方法setAttribute或removeAttribute的反馈,他们的参数要求等(我知道As也投了)


  1. 然后,在查看文档后,我怀疑您可以直接在HTML模板中的输入上执行此操作:

<input [attr.readonly]= "isReadOnly">
Run Code Online (Sandbox Code Playgroud)

IIRC我认为你必须用一个属性get in Typescript这样做:

get isReadOnly() :boolean {
}
Run Code Online (Sandbox Code Playgroud)

这种方式有效吗?


  1. 我想知道,您是否也可以在HTML模板中执行方法语法:

<input [attr.readonly]= "isReadOnly()">
Run Code Online (Sandbox Code Playgroud)

打字稿

isReadOnly() :boolean {
}
Run Code Online (Sandbox Code Playgroud)

这种方式有效吗?


总之,什么是最好的方法?

更新:还有*ngIF,因此您输出两个具有相同名称的输入元素之一.但这对我来说听起来就像一把大锤要破解坚果.

html-input readonly attr angular

26
推荐指数
1
解决办法
4万
查看次数

DDD - 应实施哪一层DTO

如果我的问题很天真,我会倾向于DDD,所以道歉.我想我需要使用本地数据传输对象才能向用户显示数据,因为许多属性不属于任何实体/值对象.

但是,我不确定应该在域域层或应用程序服务层中实现此DTO的位置.DTO实现似乎是域的一部分,但这意味着当我在服务层中创建DTO集合并将其传递给表示层时,我必须在表示层中引用域层,这似乎是错误的.

使用DDD原则实现DTO的正确方法是什么?

implementation domain-driven-design layer dto

22
推荐指数
4
解决办法
1万
查看次数

在Angular 2/Jasmine测试中testbed.get和inject有什么区别?

我是Angular 2测试的新手.我试图弄清楚在测试级别使用testsbed.get()和使用有什么区别inject.

例如:

beforeEach(() => {
    TestBed.configureTestingModule({
        providers: [SomeService]
    });

    const testbed = getTestBed();
    someService= testbed.get(SomeService);
  });
});
Run Code Online (Sandbox Code Playgroud)

VS

it('test service', inject([SomeService], (someService: SomeService) => {
Run Code Online (Sandbox Code Playgroud)

jasmine testbed angular

22
推荐指数
2
解决办法
4513
查看次数

什么包做1)Java和2)Groovy自动导入?

在Groovy中编程了很多,我知道某些包中的类会自动导入.什么是1)Java和2)Groovy的独家新闻?是否有明确的列表,您不需要为每种语言指定导入?

java import groovy

16
推荐指数
2
解决办法
7967
查看次数

如何在没有ComponentFactory的情况下销毁Angular 2组件?

通过ComponentFactory动态创建组件时,返回的ComponentRef提供了一个destroy方法,它完全适用于我想要完成的任务.考虑到这一点,看起来我需要做的就是为静态创建的组件获取ComponentRef,然后使用其destroy函数(这个答案说明),但是当我尝试这个时,我得到一个错误,说"destroy是不是一个功能"即使我确实得到了一个对象.

这是我用于ViewChild的语法:

@ViewChild(MyComponent) myComponentRef: ComponentRef<MyComponent>;
Run Code Online (Sandbox Code Playgroud)

而我的"破坏"电话:

private destroy() {
    this.myComponentRef.destroy();
}
Run Code Online (Sandbox Code Playgroud)

这是在这里触发的:

<button (click)="destroy()">Destroy</button>
Run Code Online (Sandbox Code Playgroud)

调用这个"destroy"方法适用于我动态创建但不是静态创建的组件.

编辑: 所以看起来这部分删除了组件,但不是来自DOM,这与在动态创建的组件上调用"destroy"时发生的行为不同.此外,当我点击我试图销毁的组件时,我的点击事件功能仍会触发.

编辑2:我更新了我的ViewChild语法,以显式读取ComponentRef并返回"undefined":

@ViewChild(MyComponent, {read: ComponentRef}) myComponentRef: ComponentRef<MyComponent>;
Run Code Online (Sandbox Code Playgroud)

如果返回"未定义",那么我猜这可能是不可能的.

angular

11
推荐指数
1
解决办法
6580
查看次数

Ionic3/Angular Error:必须为名称为'jobStatus'的表单控件提供一个值

我有一个模板表单,模板标记中包含以下代码

  <form [formGroup]="modalFG">
  ...
  <ion-item *ngIf="isChangeStatus()">
      <ion-select formControlName="jobStatus"
                  (ionChange)="jobStatusChangeHandler($event)">
        <ion-option value=4>Success</ion-option> 
        <ion-option value=5>Failure</ion-option>
        <ion-option value=6>Terminated</ion-option> 
        <ion-option value=8>Inactive</ion-option> 
      </ion-select>
  </ion-item>
  </form>
Run Code Online (Sandbox Code Playgroud)

在Typescript中我已经指定了一个值,但是我无法通过这个错误.

错误:必须为名称为'jobStatus'的表单控件提供值.

有人能告诉我我做错了什么吗?

...
private modalFG:FormGroup;
private jobStatus:number;
constructor(
  private navParams:NavParams,
  private view:ViewController,
  private fb: FormBuilder,
  ...
) {
    this.changeStatus = false;
    this.modalFG = fb.group({
      comment: ['', Validators.required],
      jobStatus: this.jobStatus
    });
}
private ionViewWillLoad():void {
    const data = this.navParams.get('data');
    this.modalFG.setValue({'jobStatus': this.jobStatus});
}

private jobStatusChangeHandler(ev:any) {
    console.log(ev);
}

private isChangeStatus():boolean {
    return this.changeStatus;
}
Run Code Online (Sandbox Code Playgroud)

我也有提交的按钮处理程序:

this.exitData.jobStatus = this.modalFG.get('jobStatus').value;
this.view.dismiss(this.exitData);
Run Code Online (Sandbox Code Playgroud)

这是完整的错误消息:

Error: …
Run Code Online (Sandbox Code Playgroud)

typescript ionic3 angular angular-reactive-forms ion-select

11
推荐指数
2
解决办法
2万
查看次数

JavaScript字符串替换为正则表达式和函数作为参数

我在阅读有关此功能的书籍中似乎得到了相互矛盾的建议.我想知道是否有人可以澄清.例如,Nicholas Zakas声明函数参数具有格式函数的签名(match,pos,originalText)(P139:Pro JavaScript for Web Developers 2nd ed:Wrox)

他继续说当正则表达式有一个匹配时,函数会传递三个参数(如上所述).当有多个捕获组时,每个匹配的字符串作为参数传入,最后两个位置是position和originalText ...

然后我们来到Doug Crockfords,JavaScript:The Good Parts.(P90):他再次规定语法为字符串(searcValue,replaceValue)searchValue可以是一个正则表达式 - 很棒的匹配..如果replaceValue是一个函数,第一个参数是匹配的文本,那么第二个是捕获组1,第三个是捕获组2等等.这里有一个明显的区别.(即没有位置参数)

我还在查看Pro JavaScript设计模式(APress P152)中的一个示例,它启动了整个交叉引用过程.这些人(Ross Harmes/Dustin Diaz)用两个名为a&b的参数非常无益地指定了replaceValue函数.但它倾向于强化Doug Crockford描述的概念.

有人可以确认尼古拉斯扎卡斯的描述是否确实是一个有效的选择?

javascript string replace

10
推荐指数
1
解决办法
6183
查看次数

不同级别的CSS和优先级相互之间

我正在这里阅读一篇不错的文章:http://www.plus2net.com/html_tutorial/css-types.php 谷歌在搜索词css样式表优先级方面排名最高.但是我认为网站误导你并且不完整!有人可以证实我的怀疑吗?

1)用户定义的样式是第二低的优先级.要使用它覆盖其他样式,您需要使用!important将其移动到最高位置.2)在<link>中没有提到<link>与@import和@import的相对优先级

更准确的排序(1胜2负等):

  1. 用户定义(浏览器首选!重要 - [不是谷歌浏览器!])
  2. 内联样式表(HTML节点上的样式属性)
  3. 内部样式表(<head>中的<style>)
  4. 外部样式表(@import)
  5. 外部样式表(<link>)
  6. 外部样式表(<link>内的@import)
  7. 用户定义 - (浏览器首选项 - [不是谷歌浏览器!])
  8. 浏览器默认 - (随浏览器一起提供)

Michael Bowers Pro CSS和HTML设计模式也是一个很好的来源.但它没有提到内联.

还有什么遗漏?

PS:我在推测!重要的是从2-8缺失.因此用户定义出现两次.一旦重要,第二次没有它.因此,用户定义实质上是第二低的.!important可以自然地应用于任何级别.

css css-cascade

8
推荐指数
1
解决办法
1万
查看次数

CSS伪类困惑:活跃

我在这里看CSS:主动选择器.

:活动选择器样式链接到活动页面

这让我想到了,HTML/CSS术语中的"活动页面"到底是什么......

此时我去了w3docs部分:5.11.3动态伪类:: hover,:active和:focus.

:在用户激活元素时应用:active伪类.例如,在用户按下鼠标按钮并释放它的时间之间.

所以我使用了其中一个w3shool尝试它的页面并将一个例子组合在一起,用下面的代码代替,你可以剪切并粘贴并尝试.

<html>
<head>
<style type="text/css">
:focus,:active
{
outline-offset: 10px;
outline: solid;
}
</style>
</head>

<body>
<p>Click the links to see the background color become yellow:</p>
<a href="http://www.w3schools.com">w3schools.com</a>
<a href="http://www.wikipedia.org">wikipedia.org</a>
<button type="button">Click Me!</button>
<form>
<input type="text"/>
</form>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

表单字段适用于:焦点.但是按钮或链接不适用于:活动.

这是为什么?是否有关于"活动页面"的内容我不理解w3schools所谈到的.

谷歌搜索时,我看到了这个很好的提示,但我不认为这是相关的.

css css-selectors pseudo-class

8
推荐指数
1
解决办法
7829
查看次数

是否在JSP页面的HTML注释中评估了JSP表达式?

是否在JSP页面的HTML注释中评估了JSP表达式?

即在这种情况下服务器输出什么?

<!--
Jeremy <%="Flowers"%>
--> 
Run Code Online (Sandbox Code Playgroud)

表达式是否会被解析,或者它将作为HTML注释中的表达式保留

一个)

<!--

Jeremy <%="Flowers"%>

-->
Run Code Online (Sandbox Code Playgroud)

或b)

<!--

Jeremy Flowers

-->
Run Code Online (Sandbox Code Playgroud)

html jsp comments expression

5
推荐指数
1
解决办法
1488
查看次数