标签: angular6

我想通过 CTRL+V 从 Angular6 中的 ClipboardEvent 接收文件。但剪贴板数据始终为空（我测试了图像和文本）。我在最新的 Chrome/Firefox 版本上对其进行了测试。

正如您在屏幕截图中看到的，文件/项目属性为空。这是我当前的代码：

  ngOnInit() {
    document.addEventListener('paste', this.pasteEvent);
  }

  private pasteEvent(e): void {
    console.log(e);
  }

需要知道，当您在一个表单中有多个控件并且您想知道用户更改为哪个控件以便您可以执行某些操作时。

<input formControlName="item_name" #itemName (input)="inputChanged(itemName)">

为什么我需要获取 formControlName？

正如您在图像中看到的，某些字段已编辑但未确认，这就是为什么用户会看到用于验证或取消对该特定字段的操作的选项的原因。这就是为什么我需要获取formControlName输入更改的字段，以便我可以只显示该字段的选项。

我已经搜索了它的解决方案，但找不到stack-overflow这就是为什么我决定发布这个问题的答案

如何使用angular6中的typescript获取当前年份

currentYear:Date;
this.currentYear=new Date("YYYY");
alert(this.currentYear);

它显示无效日期

我正在尝试使用 Angular Material 和 Angular 6 的第 7 版制作自定义 MatFormFieldControl。自定义输入是一个重量输入，它有一个值（输入类型 =“数字”）和一个单位（选择“kg”，“ G”，...）。它必须放置在 mat-form-field-control 中，使用反应式表单 (formControlName="weight") 并支持错误状态 ( <mat-error *ngIf="weightControl.hasError('required')">error<...>)，甚至使用自定义验证器。

我写了这个实现：

重量-input.component.html

<div [formGroup]="weightForm">
  <input fxFlex formControlName="value" type="number" placeholder="Valore" min="0" #value>
  <select formControlName="unit" [style.color]="getUnselectedColor()" (change)="setUnselected(unit)" #unit>
    <option value="" selected> Unità </option>
    <option *ngFor="let unit of units" style="color: black;">{{ unit }}</option>
  </select>
</div>

重量-input.component.css

.container {
  display: flex;
}

input, select {
  border: none;
  background: none;
  padding: 0;
  opacity: 0;
  outline: none;
  font: inherit;
  transition: 200ms opacity ease-in-out;
}

:host.weight-floating input …

我正在使用 angular6 multi-select，它有一个项目列表，这些项目来自 angular 服务的对象数组，ngOnInit就像这样传入multi-select：

this.sensorTypes = [
  { label : "Power", value : "P"},
  { label : "Current", value : "C"},
  { label : "Voltage", value : "V"}
]

我想在multi-select表单加载时默认设置 2 个值。对于这个我结合ngModel上multi-select，并在该变量我在设定值ngOnInit这样的

this.selectedAttributes = [
  {label : "Current", value : "C"},
  {label : "Voltage", value : "V"}
]

在我的 component.html 中，我是这样创建的multi-select：

<div class="form-group row">
  <div class="col-sm-10">
    <ng-select 
       [ngClass]="'ng-select'" 
       [(ngModel)]="selectedAttributes" 
       [ngModelOptions]="{standalone: true}" 
       [options]="sensorTypes"
       [multiple]="true">
    </ng-select> …

似乎在模板中使用 getter 会导致 Angular 更改检测进入循环（getter 被调用数百次）。在阅读了大量关于类似问题的文章后，我似乎无法得到明确的答案。

背景资料：

从可维护性的角度来看，我确实相信在模板中使用 getter 是最干净的方法，但似乎是因为 Angular 在调用它之前无法知道 getter 值是否改变，它只是一直调用它。到目前为止，我发现了三个替代方案：

1. 停止使用 getter，公开所有属性并直接访问它们
2. 将每个 getter 的值存储到组件的公共属性中，并在模板中绑定它而不是 getter
3. 将Angular的changeDetection模式从默认改为onPush

选项 1 似乎有悖于使用 Typescript 类的好处。选项 2 看起来像是不必要的代码重复并降低了可维护性，选项 3 将需要大量重构。

这是一个示例（出于说明目的而简化）

模型：

export class UserModel { 
  private id: string;

get getId() {
    console.log('Getting id');
    return this.id; 
}
set setId(id) {
   this.id = id;
}
constructor() {
}
}

组件.html

<h1>Test</h1>
<p>{{user.getId}}</p>

组件.ts

  import {Component, OnInit} from '@angular/core';
    import {TestModel} from './test.model';
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export …

我正在尝试使用填充了数据对象的嵌套组件创建复杂的反应形式.

我试图实现的行为非常类似于模板驱动形式的双向数据绑定:当用户编辑表单的输入时,数据对象会自动更改.

但是与模板驱动的形式相反,我无法使用,[(ngModel)]因为它在角度V6的反应形式中被弃用.

我知道fromGroup.patchValue()只会进行单向绑定,然后不得不手动订阅更改事件并手动更新数据对象 - 这将导致大量疲惫的代码.

这种情况有没有解决方法？

我在子表单组件中有一个按钮,在from父组件中,我想在子组件中单击onClose()函数时将函数推送到子组件.我已经尝试了下面的方法,但问题是它将在第一个表单上工作,但不会在其余表单上工作.我也想传递其他功能,包括onSubmit.对我来说,我需要弄清楚我在这里做错了什么.我已经在这几天了,现在任何帮助都表示赞赏.谢谢

child form component, in the template url it contains the button for Onclose()

import { Component, OnInit, NgModule, Input, ViewChild, Output, EventEmitter } from '@angular/core';
import { FormGroup, FormBuilder, FormControl, Validators, AbstractControl,  ValidatorFn,Form } from '@angular/forms';
import { BsDatepickerConfig } from 'ngx-bootstrap/datepicker';

@Component({
    selector: 'app-editgraphs',
    templateUrl: './editgraphs.component.html',
    styleUrls: ['./editgraphs.component.scss']
})
export class EditgraphsComponent implements OnInit {
    @Input() eGraphtitle: string;
    @Output() close: EventEmitter<any> = new EventEmitter();
    graphDataForm: FormGroup;
    constructor(private fb: FormBuilder,){}
    ngOnInit(): void {
     this.graphDataForm = this.fb.group({
    sDepartment: new FormControl(null, …

在我的角度应用程序(使用角度材料)我有一个过滤器面板,我想除了选择能够自动完成(用户输入值,它发送到后端,由此$ regexp查询我们在MongoDB集合中找到匹配).但要做到这一点,我需要手动将服务注入过滤器组件.我没有找到任何关于如何做的信息.

我需要这样的东西:

if (filters.serviceName) {
  injector.inject(serviceName);
}

injector.get(serviceName).find(searchQuery);

可能吗？谢谢.

Angular Material CDK树组件文档说:

"平面树通常更容易进行样式和检查.它们对滚动变化也更友好,例如无限或虚拟滚动 "

有关如何将虚拟滚动应用于CDK平面树的任何想法？

我有一个巨大的树来渲染,现在它很慢,当我递归打开所有节点时它会崩溃

我试过<cdk-virtual-scroll-viewport> @ angular/cdk-experimental但是没弄清楚如何将它与树组件集成