问题标签 [angular-input]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
754 浏览

file-upload - Angular 7 正确上传 doc/docx 文件

我在上传 doc 和 docx 文件时遇到问题,因为在将其转换为 base64 时无法获得正确的文件类型。这是我的输入:

在我的方法中,我这样做:

然后在“uploadFile”中,我将文件作为 base 64 字符串发送到服务器。方法是这样
的:changeFile

这适用于 pdf 或 txt 文件,但是当我上传 .doc 或 .docx 文件时,我得到了这个 base64 字符串:

而对于pdf,我正确地有:

这意味着当我尝试下载文件时,我没有得到正确的类型,因为我有 application/octet-stream,所以我不能为文件添加正确的扩展名。
我已经尝试通过将这个传递给accept输入组件的属性:

但没有任何改变,Window 的文件选择器只建议我 .pdf 和 .txt 文件

编辑

这是一个有效的堆栈闪电战

0 投票
2 回答
981 浏览

angular - 指令中的 nativeElement.Value 更改目前未反映在 input/ngModelChange 事件中

尝试替换输入的特殊字符,我最终编写了这个简单的指令:

标准化输入.directive.ts

这将替换abon keypress。这是我的示例(StackBlitz):

app.component.html

app.component.ts

一旦我输入a,我希望b在控制台输出中,对于model(标签内容)也是如此,但我会a一直到按下下一个键。问题是事件是one step behind输入的实际 UI 值。

处理这种情况的正确HostListener 事件是什么?我应该如何更改值,以便我可以在事件中获得新的(input)(ngModelChange)

StackBlitz

0 投票
1 回答
54 浏览

angular - 不能在子组件中更改按钮状态

我在我的 Angular 应用程序中遇到问题,无法在子组件中更改按钮状态,现在我首先显示我的代码。

这是一个子组件

和子组件 ts 文件

这个子组件,有两个按钮,一个是添加按钮,可以显示下拉选择,另一个是删除,可以隐藏下拉选择。

该子组件的 HTML 如下所示:

问题是,如果我单击添加按钮和删除按钮,选择 dropdowm 将不会被隐藏。

任何解决方案?

0 投票
1 回答
240 浏览

angular - Angular 11:是否可以从输入中按条件注入服务

我有一个非常大的组件,它与用于加载数据的服务一起使用,而不是重新编写用于处理新服务的类似组件,我编写了一个与第一个具有所有相同功能的服务,我尝试动态更改使用输入在组件的构造函数中注入服务。

所以我会有:

我的问题是我无法在构造函数中访问我的输入,也无法在 ngOnInit 中初始化我的服务。我怎样才能做到这一点?

0 投票
1 回答
56 浏览

angular - 绑定到上下文属性的 matInput 与 i18n 提取冲突,但不是在常规服务上

我有一段反应形式的代码可以正确编译并且可以很好地使用绑定的matInput指令执行,但是当我运行 angular cli 命令进行国际化(ng xi18n)时,我收到以下错误ERROR in Can't bind to 'matInput' since it isn't a known property of 'input'.我不明白那个错误在 i18n 提取但不是定期执行。当我删除 matInput 上的绑定时,它在 exec 和 i18n 提取上运行良好。

这就是我使用matInput绑定(so as [matInput])的原因:在我的 ts 文件中,我为每个表单字段定义了一个上下文,告诉它是否需要指令(matInputrequired),并给出需要一个指令的值formControlNametypeplaceHolder):

这允许我在 html 文件中只编写一个ng-template我将在每个输入ng-containerngTemplateOutlet指令中调用的文件,其中我为相关上下文对象提供有关给定表单字段的指令的所有所需信息

即使我从未见过 matInput 绑定,我发现用上下文对象在 ts 文件中描述一个表单字段是很优雅的,然后只用一个 ng-template 而不是重复的 mat-form-fields 来简化 html 文件。但是,即使这在定期执行时效果很好,ng serve然后我在运行时出现错误ng xi18n(用于使用 placeHolders 编辑 xlf 文件以从 ts 文件转换)。

  1. 这是否“允许”以这种方式绑定 matInput ,我的意思是我们以同样的方式应用或不使用[class.my-class]="<boolean>"?
  2. 即使这可行,我也不明白绑定如何区分[required]="true"“应用所需指令”和[type]="text"“将“文本”值赋予类型指令”。因此,使用 ts 文件中描述的上下文,我怎么能将布尔值传递给指令,而不仅仅是告诉它在[class.my-class]="<boolean>"
  3. 绑定的 [matInput] 怎么可能不会成为常规发球的问题并导致 i18n 提取崩溃?
0 投票
1 回答
101 浏览

angular - 角度如何刷新@Input的值

嘿,我尝试学习 @Input 以尽量减少冗余代码。

我的问题是我现在不知道如何更新我的列表

接收数据的组件

我正在从其他组件导入数据源,并且在此组件中是更新数据源的方法

发送数据的组件

注入数据源

有谁知道我如何从其他组件调用此方法以更新数据源?

谢谢你的时间

解决方案 https://angular.io/guide/inputs-outputs#sending-data-to-a-parent-component

0 投票
0 回答
169 浏览

angular - Angular 内联编辑组件

我正在像 Jira 一样在 Angular 中搜索用于内联编辑的组件/插件/方式。我录制了一个示例 gif示例 GIF:

有人有这样的组件吗?我很高兴听到你的建议:)谢谢!

0 投票
2 回答
297 浏览

javascript - 一旦设置了 2 个输入就触发一个函数,然后如果 Angular 中的任何一个值发生变化,则触发一个函数

我有一个带有 2 个输入(或 mor)的组件,我想:

  1. 当两个值都设置并存在时,第一次触发方法 X
  2. 如果两个值中的任何一个发生变化,则每次触发方法 X

这两个值都可以随时更改,因此我认为使用rxjs构建流可以让我控制一切。我目前的解决方案似乎有点老套,很难测试。我使用2BehaviourSubjects和.combineLatestdebounceTime

所以我的问题是

  1. 有没有更优雅的方式来实现这种行为?
  2. 有没有办法避免debounceTime,这使测试变得困难?

debounceTime用于两个值同时到达并且我不想combineLatest触发该方法两次的情况。

0 投票
1 回答
56 浏览

angular - 无法绑定到“属性”&&“应用程序组件”不是已知元素

我有一个大问题。整个事情就是这样开始的:修复损坏的 HTML 文件或反编译 Angular 组件

我的电脑突然崩溃了,从那次事件开始,它每秒都变得更糟。我收到奇怪的错误,例如“'app- component' 不是已知元素”或“找不到名称为 'async' 的管道”甚至“无法绑定到 ' attribute',因为它不是 'app- 的已知属性” component”。我得到了很多组件。

我做了什么:
我立即删除了我在另一个线程中谈到的损坏文件,并开始查看每一段代码。每一个错误。但这对我来说似乎一切都很好。即使对于 Visual Studio Code 也很好,因为它没有向我触发任何错误/问题,如您在此处看到的: VSC 终端屏幕截图

我真的不知道我该怎么办。

在这里您可以找到存储库:
https ://github.com/plungarini/alpha-project

0 投票
2 回答
433 浏览

angular - 如何在Angular中检测具有相同值@Input()的变化?

我有一个 Angular Custom 滚动指令,@Input()其中我将 HTML 元素作为参数传递,以将滚动条移动到该特定的 HTML 元素。

使用这种方法,如果我多次传递相同的 HTML 元素,则输入检测仅在第一次发生更改后才检测到任何更改。

有什么方法可以强制 Angular 检测相同输入的变化?