标签: angular6

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

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

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

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

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

我正在尝试使用Angular 6构建一个应用程序,我仍在设置所有内容.但似乎我的应用程序中的依赖注入有问题.

它无法解析任何构造函数参数.他们都导致了Uncaught Error: Can't resolve all parameters for AppComponent: (?)..即使是自定义服务也会导致相同的错误.

版本 (省略了对此不会产生任何影响的依赖项)

 "dependencies": {
    "@angular/common": "6.0.5",
    "@angular/compiler": "6.0.5",
    "@angular/core": "6.0.5",
    "@angular/forms": "6.0.5",
    "@angular/http": "6.0.5",
    "@angular/platform-browser": "6.0.5",
    "@angular/platform-browser-dynamic": "6.0.5",
    "@angular/router": "6.0.5",
    "core-js": "2.5.7",
    "reflect-metadata": "0.1.12",
    "rxjs": "6.2.1",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@angular/compiler-cli": "6.0.5",
    "@ngtools/webpack": "6.0.8",
    "angular2-template-loader": "0.6.2",
    "awesome-typescript-loader": "5.1.0",
    "typescript": "2.7.2",
    "webpack": "4.12.0",
    "webpack-cli": "3.0.8",
    "webpack-dev-server": "3.1.4",
  }

app.module.ts

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { …

我在角度6中安装了多个库,我需要在另一个库中导入一个库.他们相互依赖但不起作用

这是怎么回事:

ng generate library lib1

ng generate library lib2

现在在主应用程序中,package.json我tsconfig.json在compilerOptions库中添加(它们会自动插入)

"paths": { "lib1": ["../distPack/lib1"], "lib2": ["../distPack/lib2"] }

(我修改了它们生成的路径distPack)

我可以导入它们app.module,一切正常

import { Lib1Module } from 'lib1'

问题

我想: import { Lib1Module } from 'lib1'inlib2/src/lib/lib2.module.ts

并且它找不到它.

我尝试了什么:

1. peerDependency
2. 它添加到tsconfig.lib作为paths
3. 包括它作为直接路径(在--prod构建中失败)

更新

如果我打造集主要路径tsconfig.json,以

"paths": { "lib1": [ "dist/lib1" ],

其他库可以导入它没有问题但是它不能再导入app.module

你能告诉我为什么我不能在 CLI 下使用吗？它说Specified module does not exist。两个 CLI 命令的错误相同。

注意：我已将此应用程序从 升级ng 5到ng 6. 这是由于升级问题导致的错误吗？

ng generate component messages --module=core

ng generate component messages --module=app

app.core.module.ts

export class CoreModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: CoreModule
    };
  }
}

app.module.ts

export class AppModule { }

ng --version

Angular CLI: 6.0.8
Node: 8.11.2
OS: win32 x64
Angular: 6.0.7
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router …

如何将 ngFor 变量传递给 ng-content 模板。

例如，包含组件：

<ul>
    <li *ngFor="let item of itemsArray">
       <ng-content></ng-content>
    </li>
</ul>

嵌套的内容组件：

<div>
    <span *ngIf="item.type_one"></span>
    <span *ngIf="item.type_two"></span>
</div>

例如，两者：

<containing-component>
    <content-component>
    </content-component>
</containing-component>

我想要pipe一个反应形式的表格组。

然后我想对这组单独的控件进行一些检查。

这是我定义表单的方式

  myForm = this.formBuilder.group({
    myFormNameDrop: this.formBuilder.group({
      myName:['',Validators.required],
      myDrop:['era']
    }),    
    style:[''],
    userId:[this.user_id]
  });

这就是pipe我试图创造的

this.results = this.myForm.value.myFormNameDrop.valueChanges.pipe(      
  debounceTime(400),
  distinctUntilChanged(),            
  filter(formdata => formdata.myName.length > 0),
  switchMap( formdata => this.shoesService.details(formdata.myName)),
  shareReplay(1)
);//pipe  

我有两个错误。 TypeError: Cannot read property 'pipe' of undefined有关this.results = this.myForm.value.myFormNameDrop.valueChanges.pipe(

并且 VS 代码显示有关以下内容的警告filter(formdata => formdata.myName.length > 0),：myName类型上不存在属性'{}'

在这种情况下，我如何访问 formGroups 和 formGroups 的控件？我使用角度 6

谢谢

尝试在我的 Angular 6 应用程序中点菜使用 Bootstrap 4，就像在我的 angular.json 文件中一样......

"styles": [
              "node_modules/bootstrap/scss/_functions.scss",
              "node_modules/bootstrap/scss/_variables.scss",
              "node_modules/bootstrap/scss/_mixins.scss",
              "src/styles.scss"
            ] 

在进行 sass 加载尝试后，会在终端中产生此错误...

./node_modules/bootstrap/scss/_variables.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js?? ref--15-3!./node_modules/bootstrap/scss/_variables.scss) 模块构建失败（来自 ./node_modules/sass-loader/lib/loader.js）：

未定义^论证$color的darken($color, $amount)必须是一种颜色

这是 _variables.scss 中有问题的行： $link-hover-color: darken($link-color, 15%) !default;

上面两行声明： $link-color: theme-color("primary") !default;

我在这里查看了许多可能的解决方案，但他们中的大多数人都说将函数放在已经完成的 vars 之前，但错误仍然存​​在。

非常感谢任何帮助。

我是 angular 6 的新手，在这里我需要比较日期输入并找到最大的输入。

input 1 : 2018-12-29T00:00:00
input 2 : Mon Dec 31 2018 00:00:00 GMT+0530 (India Standard Time)

在这里，我收到了来自 mssql 数据库的输入 1和来自材料 datepicker的输入 2。

如下比较这两个日期时，我得到了错误。

console.log(mMagazineObject.From < mMagazineObject.To ? true : false);

有没有可能比较这两种日期格式。如果是，请帮我解决这个问题。

父组件模板：

<my-component [param]="whatever"></my-component>

父组件代码：

whatever = { value1: 0, value2: 1, value3: 'foo' };

子组件代码：

@Input() public param: any;

ngOnChanges() {
  console.log('Received input: ', param);
}

这不起作用。whatever子组件ngOnChanges不会注意到对 的任何更改，也不会触发。

如果我尝试使用 setter，它也不起作用：

@Input() set param(value) {
  console.log(value);
}

如果我尝试在父组件中运行手动区域更新，它也无济于事。

显然@Input()只能检测对象的结构何时发生变化，而不能检测其值。

那么如何将对象作为@Input()属性传递并让子组件检测值的变化呢？

I'm working in forms and I have two components: my child component contains this formGroup Object :

employeeForm : FormGroup;
this.employeeForm = new FormGroup({
       firstName:new FormControl(),
       lastNAme:new FormControl(),
       email:new FormControl()
    });

the child Component conatins just a small part of the form and the parent componant, contains the global form with submit button..

my issue is: I want in the Parent Component when I click on submit button I get the form group from my child component and push it …