标签: angular8

我正在使用 Angular/Material Autocomplete。加载数据到 Autocomplete 会遇到严重的性能问题，比如渲染需要大约 30 秒，需要 10 多秒才能稳定，数据是从服务器加载的，从服务器接收数据非常快。为了解决这个问题，我使用了 cdkVirtualScroll，在向下滚动到结尾并再次单击文本框后，它在滚动其加载值后加载空弹出窗口。

html

   <mat-form-field>
      <input type="text" placeholder="Pick one" aria-label="Number" matInput [matAutocomplete]="auto">
      <mat-autocomplete #auto="matAutocomplete" (opened)="panelOpened()">
        <cdk-virtual-scroll-viewport itemSize="48" style="height: 240px" minBufferPx="96" maxBufferPx="144">
          <mat-option *cdkVirtualFor="let option of options" [value]="option">
            {{option}}
          </mat-option>
        </cdk-virtual-scroll-viewport>
        </mat-autocomplete>
    </mat-form-field>

TS

export class AppComponent  {
  options: string[] = [];

  @ViewChild(CdkVirtualScrollViewport, {static: true}) viewport: CdkVirtualScrollViewport;

  constructor() {
    for (let i = 0; i < 10000; i++) {
      this.options.push("#"+i);
    }
  }

  panelOpened() {
    if (this.viewport) {
      this.viewport.checkViewportSize();
    }
  }
}

检查前：https : …

我浏览了两个函数的角度文档

bypassSecurityTrustUrl说

绕过安全性并将给定的值信任为安全样式的 URL，即可以在超链接或 <img src>

bypassSecurityTrustResourceUrl说

绕过安全性并将给定值信任为安全资源 URL，即可用于从<script src>、 或加载可执行代码的位置<iframe src>。

以上都用于绕过安全和信任。

我绕过了 blob url <img src>，所以在阅读文档之前，我的 IDE (vscode) 展示了上述两个函数，我使用了bypassSecurityTrustResourceUrl，我的代码就像......这样。

组件.ts

    this.fileService.getFileBlobUrl(imgsrc).subscribe(url => {
      this.domSanitizer.bypassSecurityTrustResourceUrl
      user.bloburl = this.domSanitizer.bypassSecurityTrustResourceUrl(url);
    });

组件.html

    <img [src]="user.bloburl" class="avatar" alt="avatar">

根据文档bypassSecurityTrustUrl应该可以正常工作。但我使用了“bypassSecurityTrustResourceUrl”

它实际上正在工作！！！！

所以我的问题是这两个功能之间有什么区别。如果可以使用其中任何一个，为什么会有两个不同的功能？

我正在开发一个处理 xml 文件并返回接口数据结构的服务。
起初我以为服务已经正确返回了所有数据，但后来我意识到一些不清楚的事情，特别是当我要读取组件中的数据结构时。
这是我的服务：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { AppConfig } from 'src/app/app.config';
import { forkJoin, Subscription } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class BibliographyParserService {

  private editionUrls = AppConfig.evtSettings.files.editionUrls || [];
  private bibliographicCitations: Array<BibliographicCitation> = [];
  private subscriptions: Array<Subscription> = [];

  constructor(
    private http: HttpClient,
  ) {
  }

  private getHttpCallsOBSStream() {
    return this.editionUrls.map((path) =>  this.http.get(path, { responseType: 'text'}));
  }

  public getBibliographicCitations(): Array<BibliographicCitation> {
    const parser = new …

我们最近从 ng 7.2.15 和 typescript 3.2.4 升级到了 angular v8.2.14 和 typescript v3.5.3。将表单组从父组件传递到子组件不再有效。

下面是我的子组件：子组件。ts

@Component({selector:'edit-overview'})
    export class ChildComponent implements OnInit {  
       public OverviewFormGroup : FormGroup
       constructor(private controlContainer: ControlContainer) {
       }

    ngOnInit() {
    this.OverviewFormGroup = <FormGroup>this.controlContainer.control;
    }
    }

子组件.html

<div [formGroup] ='OverviewFormGroup'>
</div>

和我的父组件

父组件.html

<div [formGroup]="Form1">
      <edit-overview [formGroup] = "Form1.controls.OverviewFormGroup">
      </edit-overview>
</div>

父组件.ts

export class ParentComponent {
constructor(private readonly fb: FormBuilder) {
this.Form1 = this.fb.group({
 name: new FormControl('', [Validators.required]),
 OverviewFormGroup: new FormGroup({
        description: new FormControl('', [Validators.nullValidator])
      })
})
}
}

它抛出此错误：“AbstractControl”类型缺少“FormGroup”类型中的以下属性：controls、registerControl、addControl、removeControl …

如何让 FormBuilder 要求数字？

我正在为纬度和经度编写表单构建器。在这下面，

• 写入 -91 或 91 会产生验证错误，按预期工作
• -90 和 90 之间的任何东西都很好。
• 它接受最多 32 位数字和小数点的数字，也可以工作

问题：

• 但是，输入字母“Abcd”等不会出现验证错误。

如何解决这个问题？

  'latitude': [null, [Validators.maxLength(32), Validators.min(-90), Validators.max(90)]],

如果可能，最好在表单中进行验证，而不是输入文本框 type=number，

我正在阅读有关 Angular ViewChild 并与输入/输出参数进行比较的内容。只是好奇Viewchild是否有任何缺点，或者无法做一些输入/输出可以？

似乎 ViewChild 是首选路线，因为所有参数现在都位于 Typescript 中。这似乎比混合/混淆到 html 标记中更好。业务/数据逻辑参数现在可以位于一处。

视图子项

@ViewChild(AddressTypeDropdownComponent, { static: false }) child: AddressTypeDropdownComponent;

ngAfterViewInit() {
  // Subscribe to the child component event
  this.child.addressTypeChange.subscribe(value => {
    console.log(value);
  });
}

someMethod() {
  // Set the input values of the child component
  this.child.addressTypeDefaultItem = someValue1;
  this.child.selectedAddressType = someValue2;
}

输入输出

<app-address-type-dropdown 
    (addressTypeChange)="addressTypeChangeEvent($event)"
    [addressTypeDefaultItem]="someValue1"
    [selectedAddressType]="someValue2">
</app-address-type-dropdown>

我是 Angular 8 的新手。
我在一个组件中创建了以下下拉菜单，这对我来说非常有用：

<ng-select class="w-25 p-3" placeholder="{{'author' | translate}}" [clearable]="false" [searchable]="false">
        <ng-option>{{'author' | translate}}</ng-option>
        <ng-option>{{'title' | translate}}</ng-option>
        <ng-option>{{'date' | translate}}</ng-option>
</ng-select>

现在我想知道如何ts在同一组件的文件中检索所选元素。
提前致谢。

对于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, …

我是 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

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

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