标签: angular

我看了几个问题和答案,但无法解决我的问题.我的代码如下:

HTML

 <input type="file" id="file" accept="image/*" name="File" (change)="handleFileInput($event.target.files)">
 <button type="button" mat-raised-button color="primary" (click)="uploadFileToActivity()">Upload</button>

零件

  handleFileInput(files: FileList) {
    this.fileToUpload = files.item(0);
  }

  uploadFileToActivity() {

    this._dishAddService.postFile(this.fileToUpload).subscribe(data => {

      }, error => {
        console.log(error);
      });
  }

服务

 postFile(fileToUpload: File): Observable<boolean> {
    const formData: FormData = new FormData();
    formData.append('fileKey', fileToUpload, fileToUpload.name);
    let headers = new Headers({ 'Content-Type': 'application/json' });    
    headers.append('Content-Type', 'multipart/form-data');

    let options = new RequestOptions({ headers: headers, method: 'post' });
    return this.http.post(this.httpRequestUrl + 'api/dish/UploadDishImage', formData, options)
      .map(
        (response => response.json()))
      .catch(CommonFunctionService.handleError);
  }

API …

我想要实现的目标:

我已经创建了一个Angular模块,我希望在npm install我的GIT仓库(我不想使用npm publish它,因为它是私有代码)在其他项目中.

我正在使用ng-packagr(https://github.com/dherges/ng-packagr)获取Angular包格式.这将为dist新创建的包创建一个文件夹.

这是我用GIT安装mypackage的方法,例如:

npm install https://SOMETHING/SOMETHING.git#v0.1.0

我的问题是:

我的问题是我尝试了这两件事,但我认为它们都是丑陋或糟糕的:

1. 我把一切都对我GIT回购(我删除dist从.gitignore),但经过npm install和npm start我得到一个模块没有发现错误.我认为这甚至不起作用,因为包在子文件夹中dist(我从中导入我的模块node_modules/mypackage/dist).另一个问题是,当我安装软件包时,我的源文件也存在,这不是最好的.

2. 我只将dist文件夹推送到GIT仓库.然后我可以在另一个项目中轻松安装它,它可以工作,没有错误.但我的问题是我应该把我的代码推到其他地方.有了这个,我必须有2个GIT回购.一个用于我的实际代码,一个用于包(dist文件夹).

我知道必须有某种更好的解决方案.我读了很多文章,但我一无所获.

谁能为此提出一个好的解决方案？或者我应该选择第二个？

使用angular HttpClient查询对象数组时，将结果的每个对象（Rxjs Observable）映射到另一个对象的最简单方法是什么？

我目前正在执行以下操作，但是有没有办法避免“双重映射”？

在示例中，最终结果必须Observable<Entry[]>与为每个Entry-object 调用的构造函数相同：

public getList(): Observable<Entry[]> {
  const url = "/entries/";
  return this.httpClient.get<Entry[]>(url)
    .map((entries: any[]) => entries.map((e) => new Entry(e)));
}

使用Angular 5，带有scss的angular-cli。

我正在创建使用第三方组件（angular-tree-component）的角度组件。我需要为树导入样式。由于在angular中使用样式隔离（使用默认的仿真视图封装），因此，实现它的唯一方法是使用::ng-deep，如下所示：

:host ::ng-deep {
    @import '~angular-tree-component/dist/angular-tree-component.css';
}

但这不起作用-好像在中@import被忽略了:host ::ng-deep。我通过直接在方括号内复制css文件的内容来解决该问题，但是它的效果不是最佳，就好像参考包已升级一样，那么我将不得不用新样式手动替换内容。

我只能想到的其他解决方法是将视图封装更改为，None但由于它使样式成为全局样式，因此看起来甚至更糟。

有没有更好的选择？

我们正在开发一个企业组件库,它应该提供Material Designed Angular Components.所以这个库的用户不应该直接使用例如Angular Material,而是包括一些像" custom-tabs " 这样的组件.

使用MatTabModule的组件直接像魅力一样工作,而在使用我们的自定义组件时,投影内容不会显示.

用法看起来与Angular Material API非常相似:

<custom-tabs>
  <custom-tab [label]="labelA">Content A</custom-tab>
  <custom-tab [label]="labelB">Content B</custom-tab>
  <custom-tab [label]="labelC">Content C</custom-tab>
</custom-tabs>

自定义组件尝试按如下方式投影内容:

<!-- custom-tabs template -->
<mat-tab-group>
  <ng-content></ng-content>
</mat-tab-group>

<!-- custom-tab template -->
<mat-tab [label]="label">
  <ng-content></ng-content>
</mat-tab>

有谁知道我们如何让它运作？

我提供了一个StackBlitz,您可以在其中查看问题.

我有一个输入,用户需要输入经度.我希望能够在用户输入NaN或Not-Precise-Enough值时显示不同的错误消息.我正在使用FormControl.hasError('ValidatorsName')验证来获取错误,但似乎我无法区分这些模式.

模板:

<mat-form-field class="form-field">
    <input matInput placeholder="Logitude" [formControl]="longitude">
    <mat-error *ngIf="longitude.hasError('pattern')">
        Longitude must be <strong>a number</strong>
    </mat-error>
    <!-- I want to be able to check patter2 for example -->
    <mat-error *ngIf="longitude.hasError('pattern')"> 
        Longitude must have <strong>a minimum of 5 decimal numbers</strong>
    </mat-error>
</mat-form-field>

我的Angular代码:

this.longitude = new FormControl(this.attraction.longitude, [
    // is valid number
    Validators.pattern(new RegExp('(\d{1,3})([.|,]{,1})(\d+))','gi')),
    // is precise enough
    Validators.pattern(new RegExp('(\-{0,1})(\d{1,3})([.|,]{1})(\d{5,13})','i'))
]);

有没有办法给这些模式一个标识符？我会感激任何帮助.

想要在客户端进行分页和排序的人请参阅此链接

这是我试过的.数据正在控制台中加载.但它不会显示在网格或垫子表上.

我在控制台中没有任何错误.我能够在控制台中看到数据,但数据未加载到网格中.

谁能告诉我我做错了什么？

发出数据的实际数据库.

export class FormsDatabase {

   formsList =  new BehaviorSubject([]);
    get data(){

      return this.formsList.value;
   }

 constructor(private _formsServicedata: FormsService){
    this._formsServicedata.getAllFormData('').subscribe((form)=>{
        console.log("Form DataSource: ");
    this.formsList.next(form);
  })
   }

}


export class FormDataSource extends DataSource<any>{

    constructor( private formsDb: FormsDatabase,public 
    paginator:MatPaginator , public sort: MatSort
    ) {
       super()        
      }

   connect():Observable<any>{
      const formsData=[
         this.formsDb.formsList ,
         this.sort.sortChange
    ];

     return Observable.merge(...formsData).map(()=>{
          this.getSortedData();
    })


    }

排序功能以对数据进行排序

      getSortedData(){

        const data = this.formsDb.data.slice();
       if(!this.sort.active || this.sort.direction==''){ return data;}

        return data.sort((a,b)=>{

        let propertyA:number|string='';
        let propertyB:number|string='';

    switch(this.sort.active)
    {
        case …

尝试将switchMap运算符应用于我的Observable时,我收到以下错误消息:

属性'switchMap'在'Observable'类型上不存在.

我目前正在使用rxjs版本5.5.2,在我的组件中,我将它导入如下:

import 'rxjs/operator/switchMap';

但是,我仍然遇到编译错误.我已经查看了类似的问题,并没有找到适当的解决方案,对这里的问题提出了什么建议？

get appUser$() : Observable<AppUser> {
  return this.user$
    .switchMap(user => {
      if (user) return this.userService.get(user.uid);

      return Observable.of(null);
    });    
}

图片:

我有一个应用程序,它有多个视图,如导航和页面.所以我添加了一个布局模块并将该模块导入主模块,现在尝试在app组件中使用布局模块导航组件.所以这应该显示navigation.html内容,但它将变为空白.它也没有给出任何错误.不确定我做错了什么.以下是我的代码,它将提供正确的图片:这是app.model.ts

    

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { LayoutsModule } from './layouts/index';

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

这是LayoutsModule

   

    import { NgModule } from '@angular/core';
    import { NavigationComponent } from './navigation/navigation.component';


    @NgModule({
      declarations: [
        NavigationComponent
      ],
      exports: [

      ],
      imports: [

      ],
      providers: [

      ]
    }) …

我们在项目中使用ng-bootstrap Datepicker作为指令：

<input class="form-control"
         name="dp" ngbDatepicker #d="ngbDatepicker" (blur)="d.close()" [(ngModel)]="model"
         (ngModelChange)="onDateSelected()">

在目前的行为是onDateSelected()和每一个时间变化的输入领域取得了当选择在日期选择器的日期被称为。

的期望的行为是onDateSelected()被称为每当在在日期选择器或将光标移动出的日期用户点击<input>（即模糊）。

我的方法是更改(ngModelChange)为(blur)：

<input class="form-control"
         name="dp" ngbDatepicker #d="ngbDatepicker" (blur)="d.close(); onDateSelected()"
         [(ngModel)]="model">

但是，当从日期选择器中选择一个日期时，这将导致onDateSelected() 无法调用-之所以有意义，是因为光标不在内<input>。但是，dateSelected在搜索我可以调用的ng-bootstrap文档时，找不到某种-Event onDateSelected()：

<input class="form-control"
         name="dp" ngbDatepicker #d="ngbDatepicker" (blur)="d.close(); onDateSelected()"
/* missing -> */ (dateSelected)="onDateSelected()" /* <- */ [(ngModel)]="model">

我有什么想念的吗？或者也许是实现此行为的另一种方法？我想不出是唯一有此要求的人...