标签: angular8

我正在使用带有 Angular 8 的 asp.net core 2.2。我正在尝试上传文件，其中包含一些要使用 post 方法保存的数据。数据正在传递到控制器，但在控制器中 Request.Form 对象抛出错误。

它在带有 Angular 2 的 asp.core 2.0 中正常工作。但我正在尝试使用 asp.net core 2.2 将此项目更新为 Angular 8。现在我收到此错误“Request.form.files”引发了“system.invalidoperationexception”类型的异常。

角度服务代码：

        saveNewMail(user: CommunicationActivityModel, files: File[]) {
        let body = JSON.stringify(user);
        let formData = new FormData();
        for (var i = 0; i < files.length; i++) {
          formData.append('uploadedFiles', files[i]);
        }
         formData.append('user', body);

         let requestedUrl = this.baseUrl + 'SaveNewMail';

         return this.apiService.postFormData(requestedUrl, 
         formData).pipe(map(response => response));

   }

api.service代码：

 postFormData(path: string, body: FormData): Observable<any> {
    return this.http.post(
      `${environment.api_url}${path}`,
       body
     ).pipe(catchError(this.formatErrors));
  }

控制器代码： …

Angular 版本 8 升级后，Nebular 更新到版本 4。升级后，我看不到之前显示的很棒的字体图标。

我尝试浏览 nebular 的这份文档，它要求我们将 font Awesome 注册为默认包。但即使这样做也不起作用。 https://akveo.github.io/nebular/docs/guides/register-icon-pack#register-icon-pack。

找不到关于此问题的足够讨论。Font Awesome 已包含在内，并且我已将其添加到我的 angular.json 文件中

constructor(private iconService: NbIconLibraries) {
    this.iconService.registerFontPack('font-aweome');
    this.iconService.setDefaultPack('font-aweome');
}

Nebular 应该接受字体很棒的图标。

我正在为我的项目做面包屑。我这里有两个问题：

1. 当我来自其同级页面时，未生成面包屑
2. 页面刷新时未生成面包屑

两者该如何解决呢？

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, RoutesRecognized, NavigationStart,  NavigationEnd, Params, PRIMARY_OUTLET } from '@angular/router';
import { filter, map } from 'rxjs/operators';
import { BreadCrumbsService } from './../../services/bread-crumbs.service';


@Component({
    selector: 'bread-crumbs',
    templateUrl: './bread-crumbs.component.html',
    styleUrls: ['./bread-crumbs.component.scss']
})
export class BreadCrumbsComponent implements OnInit {

    breadcrumbList: Array<any> = [];

    /**
        * Setting Breadcrumb object, where name for display, path for url match,
        link for heref value, getting datas from BreadCrumbsService service
    */

    constructor(private router: Router, …

将子组件表单放入父组件表单的最佳方法是什么？我们使用的是 2019 年最新的 Angular 8。经过研究，以下方法不能完全奏效。

父组件：

 ngOnInit() {
    this.parentForm = this.fb.group({
       childForm1: etc
    })

子组件：

this.ChildForm = this.formBuilder.group({
  'streetNumber': [null, [Validators.required, Validators.maxLength(32)]],
  'streetType': [null, [Validators.maxLength(8)]],
  'city': [null, [Validators.maxLength(32)]],
  'state': [null, [Validators.maxLength(16)]],
  'postalCode': [null, [Validators.maxLength(16)]],
}, { validator: atLeastOneLocationRequired })

}

方法一：

这个方法，https: //itnext.io/partial-reactive-form-with-angular-components-443ca06d8419 经过严格测试表明 ParentForm 有效，即使 Child Form 无效。这不应该发生。

ngOnInit() {
  this.parent = this.fb.group({
    fullName: null
  })

}

formInitialized(name: string, form: FormGroup) {
  this.checkoutForm.setControl(name, form);
}

方法二：

方法 2 使用 ViewChild，这是听力不好的做法。 https://davembush.github.io/attaching-an-angular-child-component-s-form-to-a-parent/

@ViewChild(ChildComponent) childComponent: ChildComponent;

And now in ngAfterViewInit() …

<input matInput placeholder="DD/MM/YYYY" [matDatepicker]="picker" class="modifyDate" NoSpecialChar ngModel #dateCtrl="ngModel" name="datepicker" (click)="picker.open()" id="dtDeparture" required>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
<mat-error *ngIf="dateCtrl.errors?.required && dateCtrl.touched">Choose a Date       
</mat-error>

<input matInput placeholder="DD/MM/YYYY" [matDatepicker]="picker1" NoSpecialChar class="modifyDate" [(ngModel)]="inputEndDate" name="dtArrival" (click)="picker1.open()" id="dtArrival" required>
<mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
<mat-datepicker #picker1></mat-datepicker>

正如您在上面看到的，我们为日期输入即picker1 和picker 提供了唯一的ID。问题仍然存在“MatDatepicker 只能与单个输入相关联。” 不知从何而来。我需要帮助。我在谷歌和stackover上搜索过，但没有帮助

我在 angular8 工作并面临一个问题，

为了动态加载我的样式，我使用了波纹管代码并且它运行良好，但是当我将包更新"@angular-deficit/build-angular": "^0. 800.0"为 时"@angular-deficit/build-angular": "^0. 803.21"，它停止工作。该应用程序运行良好，终端和浏览器控制台中没有错误，但应用程序上未实现样式。

declare function require(name: string): any;
 ngOnInit() {
    require('style-loader!./file-path');
}

包.json

{
"name": "latest-frontend-theme",
"version": "0.0.0",
"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "bundle-report": "webpack-bundle-analyzer dist/stats.json"
},
"private": true,
"dependencies": {
    "@agm/core": "^1.1.0",
    "@angular/animations": "^8.2.14",
    "@angular/cdk": "^8.2.3",
    "@angular/common": "~8.2.14",
    "@angular/compiler": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/forms": "~8.2.14",
    "@angular/material": "^8.2.3",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/router": "~8.2.14",
    "@ngx-loading-bar/core": "^4.2.0",
    "@ngx-loading-bar/router": …

我对 angular/ionic 很陌生，我正在尝试创建一个带有默认选中复选框的表单。

它尝试了两个

checked

和

checked="true"

但两者都不起作用。奇怪的是，属性“禁用”工作得很好。

这是我的 html：

checked

这是它的样子：

我在装有最新 Safari 浏览器的 MacBook Pro 上使用 angular8 和 ionic4。有任何想法吗？

我正在尝试将 CKEDITOR 5 集成到我的 Angular 8 项目中。我已经使用其他插件以及 ClassicEditor 和 InlineEditor 创建了自定义超级构建（使用本指南：https ://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/advanced-setup.html#creating-super-建立）。

我已经导入CKEditorModule到我的共享模块文件中。下面是我的组件文件：

import { Component, OnInit } from '@angular/core';
import * as CKEDITOR from '@ckeditor/ckeditor5-build-classic';

@Component({
    templateUrl: './cke5.html',
    styleUrls: ['./cke5.scss'],
    selector: 'app-cke5'
})
export class CKE5  {

    loader: any;

    public CEditor = CKEDITOR.ClassicEditor.create( document.querySelector( '#editor' ), {
        extraPlugins: [ this.imageUploadAdapterPlugin ],
    } )
    .catch( error => {
        console.log( error );
    } );

    constructor() {
        console.log(CKEDITOR.ClassicEditor);
    }

    uploadImage() {
        return this.loader.file
            .then( file => new …

我按照本指南在我的 Angular 8 应用程序中设置了滑动滑块。

将NgxUsefulSwiperModule导入app.module.ts时出现以下错误

{
  "name": "angular",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --ssl",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "run:prod": "ng build --prod",
    "test-single-run": "ng test --watch=false"
  },
  "private": true,
  "dependencies": {
    "@aleesaan/ng-scrollspy": "^1.0.2",
    "@angular/animations": "^8.2.14",
    "@angular/cdk": "^8.2.3",
    "@angular/common": "~8.2.14",
    "@angular/compiler": "~8.2.14",
    "@angular/core": "^8.2.14",
    "@angular/forms": "~8.2.14",
    "@angular/material": "^8.2.3",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/pwa": "^0.1000.0", …