标签: 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-cli 8.3.5和material-angular 8.2.1。

我正在尝试将 HTML 居中，但没有找到有关帮助程序类的任何文档。

有谁知道如何完成我正在做的任务？

Angular 工作区允许我将多个项目添加到单一存储库中，这很棒。然而，在与多个团队合作时，我注意到，如果您只有一个 package.json 并且让每个团队使用他们正在编写的应用程序对其进行编辑，那么事情可能会变得非常混乱。

可以有这样的结构吗？

|\xe2\x94\x80\xe2\x94\x80 angular.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 browserslist\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 e2e\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 karma.conf.js\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 node_modules\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json <--- I should only be responsible for everything in /src\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package-lock.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 projects\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 my-sub-application\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 browserslist\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 karma.conf.js\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json <--- Is this possible? So that "my-sub-application" only pulls its dependencies from this package.json?\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 app\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 assets\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 environments\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 favicon.ico\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.html\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 main.ts\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 polyfills.ts\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 styles.scss\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 test.ts\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 tsconfig.app.json\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 …

我正在尝试实现 Angular Material 的数据表，当我运行本地主机时，我最终在控制台中出现以下错误。

NullInjectorError: StaticInjectorError(AppModule)[A11yModule -> HighContrastModeDetector]: 
StaticInjectorError(Platform: core)[A11yModule -> HighContrastModeDetector]: NullInjectorError: 
No provider for HighContrastModeDetector!

我还收到一条警告，指出 Angular Material 版本 (8.2.3) 与 Angular CDK 版本 (9.1.3) 不匹配。它们是否相关以及我将如何匹配这两个版本。无法找到可能与版本不同有关的 Angular Material 核心主题？如果需要的话我可以分享一些代码。感谢所有帮助！

我是角度材料设计的新手，我想显示带有页眉和页脚的日期选择器

下面是我的 ts 代码，

import {
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  Inject,
  OnDestroy
} from '@angular/core';
import {MatCalendar} from '@angular/material/datepicker';
import {DateAdapter, MAT_DATE_FORMATS, MatDateFormats} from '@angular/material/core';
import {Subject} from 'rxjs';
import {takeUntil} from 'rxjs/operators';

@Component({
  selector: 'datepicker-custom-header-example',
  templateUrl: 'datepicker-custom-header-example.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DatepickerCustomHeaderExample {
  exampleHeader = ExampleHeader;
}

@Component({
  selector: 'example-header',
  styles: [`
    .example-header {
      display: flex;
      align-items: center;
      padding: 0.5em;
    }

    .example-header-label {
      flex: 1;
      height: 1em;
      font-weight: 500;
      text-align: center;
    }

    .example-double-arrow .mat-icon {
      margin: -22%;
    }
  `], …

对于Angular 8到9的更新，我是按照官方文档进行升级的。

这建议首先更新到最新版本的 Angular 8，例如：

ng update @angular/core@8 @angular/cli@8

但是，我收到三个警告（全部相同）：

npm WARN notsup Unsupported engine for watchpack-chokidar2@2.0.0: wanted: {"node":"<8.10.0"} (current: {"node":"12.16.1","npm":"6.13.4"})
npm WARN notsup Not compatible with your version of node/npm: watchpack-chokidar2@2.0.0
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.1.2 (node_modules\watchpack\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN ngx-multi-window@0.3.2 requires a peer of @angular/common@^6.0.0-rc.0 || ^6.0.0 || ^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN ngx-multi-window@0.3.2 requires …

我有一个有角度的应用程序，其app.component.html如下所示：

<div>
    <app-nav-bar></app-nav-bar>
</div>
<div>
 <router-outlet></router-outlet>
</div>

' app-nav-bar ' 是一个在启动此 Angular 应用程序时加载的组件，其 nav-bar.component.ts 具有 ' ngAfterViewInit ' 以及一些控制台消息，如下所示：

ngAfterViewInit() { console.log("导航栏已加载") ; }

我有一个路由模块（app-routing.module.ts），它定义路由如下：

const routes: Routes = [
 {path:'accessdenied',component:AccessDenied },
 { path: 'region', loadChildren:'//pathToSharedModule#RegionSharedModule',canActivate:[AuthguardGuard]},
 {path:'names',loadChildren:'Path'},
 {path: '**',component:RegionSharedModule ,canActivate:[AuthguardGuard]}

我使用 Angular Guard 服务根据 API 对用户进行授权并激活相应的路由。 authguard.guard.ts

import { Injectable } from '@angular/core';
//some other basic modules got imported
@Injectable({
  providedIn: 'root'
})
export class AuthguardGuard implements CanActivate {
 constructor(private router:Router,private shared:SharedServiceContainer,private api:ApiService){}
 canActivate(
    next: ActivatedRouteSnapshot, …

我在使用 Angular 8 进行样式清理时遇到问题。我多次使用 ngStyle，但这次我无法设置元素的边框td。

我正在尝试根据字段设置边框样式。如果该字段有与我相关的内容，那么我会突出显示它，否则我不会突出显示。我不知道该字段可能值的数量，也不知道确切的值：它完全是动态的，我只知道我感兴趣的值。

我从.ts文件内的函数返回边框样式。以下是代码片段：

<ng-container matColumnDef="{{cam}}">
   <th mat-header-cell *matHeaderCellDef class="header"> {{cam}} </th>
   <td mat-cell *matCellDef="let piano" class="cellaMagazzino" [ngStyle]=" {'border':shouldHighlight(piano[cam])}">
      <div>
           <!--content-->
      </div>
   </td>
</ng-container>

我的打字稿函数如下所示：

shouldHighlight(element){
if (this.listaCommittenti == undefined && this.listaNumOrdine == undefined) {
  let found = this.releventContentList.find(item => item.property == element.property)
  let result = found != undefined ? '3px solid ' + this.myVariable["color"] : ""
  return result
}

我其他时候使用 ngStyle 调用函数，但在这种情况下我收到错误：

警告：清理不安全样式值 ​​3px 实心 rgb(241, 196, 15)（请参阅http://g.co/ng/security#xss）。

是否需要进行某种配置？有解决方法吗？

我正在使用 Angular 的 addTag() 和 updateTag() 更新 Angular 8 网站的元数据以获取动态内容。这些函数会更新元数据（og:description、og:image、og:title 等），正如我在检查部分中看到的那样，但当我在 Facebook 上共享它时，它不会显示更新的元数据。任何人都可以帮我解决这个问题吗？我也尝试过 Angular Universal，但这也不起作用。

我是 angular8，我在表单组内有一个表单数组，但我想检测某个输入的新更改。

ngOnInit(): void {
    this.makeForm = this.fb.group({

     
      
      year:['', Validators.required],
      amount:['', Validators.required],
      desc:['', Validators.required],
      details: new FormArray([
        this.det(), 
      ])
    })


det(){
      return new FormGroup({
        requestfor     : new FormControl(''),
        remarks        : new FormControl('')
    })}

我必须检查 formarray 值中每个值发生变化的数据。但如果我使用，我会收到错误

this.makeForm.value.details.get('requestfor').valueChanges

错误是

ERROR TypeError: Cannot read property 'valueChanges' of undefined

如何获取表单数组值内的值

如何获取该值......