标签: angular7

<ul class="list">
  <cdk-virtual-scroll-viewport  style="height: 500px" itemSize="90" >
      <div *ngFor="let n of numbers" style="height:130px;">{{n}}</div>
  </cdk-virtual-scroll-viewport>
</ul>

<!--app.module.ts-->

import { ScrollingModule } from '@angular/cdk/scrolling';

@NgModule({
  imports: [ ScrollingModule ]
})

<!--app.component.ts-->

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  numbers: number[] = [];

  constructor() {
    for (let index = 0; index < 10000; index++) {
      this.numbers.push(index);
    }
  }
}

一切都很好，但它显示“=====>无法绑定到 'cdkVirtualForOf'，因为它不是 'div' 的已知属性。<===== 错误

我的输入看起来像这样：我只想使用输入掩码但不强制用户严格填充掩码中的模式。

<input type="text" class="Enter Zipcode" placeholder="Enter Zipcode" mask="00000-0000" formControlName="zipcode">

似乎根据文档[validation]=true 默认情况下。但应该是某种方式将验证更改为false。当我这样做时

<input type="text" class="Enter Zipcode" placeholder="Enter Zipcode" mask="00000-0000" formControlName="zipcode" [validation]="true">

ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'validation' since it isn't a known property of 'input'. ("text" class="Enter Zipcode" placeholder="Enter Zipcode" mask="00000-0000" formControlName="zipcode" [ERROR ->][validation]="false">

Angular 抛出模板解析错误？

我正在开发数据驱动的应用程序，目前我面临将类型传递到材质角度对话框的问题。我想创建可重用的对话框表单，并且需要更改新对话框实例的类型。

有没有办法将类型传递到材质对话框或组件中？或者也许有可能从作为数据传递的字符串在对话框本身中创建类型？

我想在这样的（或类似的）对话框组件中使用类型：

export class DialogDynamicItemManagerDialog<T> {

    public dialogName: string;
    public items: Array<T>;
    public selectedItem: T;
    ...
}

我试图传递这样的类型：

 OpenDynamicDialog(): void {
    this.dialog.open(DialogDynamicItemManagerDialog<MyType>, {
      data: {
        title: 'Manage items',
        items: this.items
      },
    });
}

但显然它不起作用。

我也试过这个：

 OpenDynamicDialog(): void {
    const dialogRef = this.dialog.open(DialogDynamicItemManagerDialog, {
      data: {
        title: 'Manage items',
        items: this.items,
        itemType: itemType
      },
    });
}

但后来我还没有找到一种方法将字符串更改为对话框中的类型。

我无法在我的 angular 7 应用程序中显示存储在我的 firebase 存储中的图像。如何在不使用服务和从组件中存储的根目录中简单检索图像然后在 html 中循环的情况下执行此操作。

我已经尝试了不同的方法来获取下载 URL，但它们不起作用。其他方法需要使用我不想在这种情况下使用的服务。

成分

import { Component, OnInit } from '@angular/core';
import { AngularFireStorage, AngularFireStorageReference } from '@angular/fire/storage';
import { Observable } from 'rxjs'

@Component({
  selector: 'app-imageviewer',
  templateUrl: './imageviewer.component.html',
  styleUrls: ['./imageviewer.component.css']
})

export class ImageviewerComponent implements OnInit {
  images: Observable<any[]>;

  constructor(private storage: AngularFireStorage) {
    storage.ref("/").getDownloadURL().subscribe(downloadURL => {
      this.images = downloadURL;

    });
   }
}

HTML

        <div class="gal-list-view">
          <div style="margin: 20px">
              <div class="responsive" style="margin: 20px">
                  <div class="gallery" *ngFor="let image of images | async">
                    <a target="_blank"> …

我正在 angular7 中建立到我的系统的 http 连接。但是，它在模块中出错。当我创建 get 请求时会出现此消息：

Type 'Promise<any>' is missing the following properties from type 'User': id, user, email

模块：

export class User { 
  id: number
  user: string
  email: string
}

要求：

users: User;

    this.userService.getUsers().subscribe(
          response => {
            if (!response) {
              console.log(Error)
            } else {
              this.users = response
            }
          })

Http获取：

getUsers() {
        return this.service.get(this.endpoint)
        .map((response) => {
            return response;
        });
    }

服务：

standardHeaders() {
        const headers = new HttpHeaders();
        headers.append('Content-Type', 'application/json');
        if (this.authToken) {
            headers.append('X-Authorization', this.authToken);
        }
        return …

这是我的代码：

 import { CommonModule } from '@angular/common';
    import { HttpClientModule } from '@angular/common/http';
    import { NgModule } from '@angular/core';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    import { LanguageTranslationModule } from './shared/modules/language-translation/language-translation.module'

    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { AuthGuard } from './shared';

    import { SidebarComponent } from './layout/components/sidebar/sidebar.component';
    import { HeaderComponent } from './layout/components/header/header.component';

    @NgModule({
        imports: [
            CommonModule,
            BrowserAnimationsModule,
            HttpClientModule,
            LanguageTranslationModule,
            AppRoutingModule

        ],
        declarations: [AppComponent,HeaderComponent,SidebarComponent],
        providers: [AuthGuard],
        bootstrap: [AppComponent],
        exports: [
            HeaderComponent,
            SidebarComponent …

我不熟悉 Angular。我面临提交按钮的问题。当我点击提交类型的按钮时，它正在重新加载完整的页面。而不是调用我的服务 API。

即使我在表单标签和按钮单击方法中添加了 (keydown.enter)="$event.preventDefault()" ，我也尝试使用 event.preventDefault() 。但没有奏效。

请检查我下面的代码

<form  #createForm="ngForm" class="login-form text-center" (ngSubmit)="Update()" (keydown.enter)="$event.preventDefault()">
       <table cellpadding="5" class="mx-auto">
          <tr>
            <td>
              <label class="white pr-2" for="email" autofocus>Email</label>
            </td>
            <td>
              <input name="email" id="email" type="text" [(ngModel)]="email" required  #name="ngModel"class="d-inline-block w-100" >
            </td>
          </tr>

          <tr>
            <td></td>
            <td class="text-left">

                <button class="d-inline-block text-left lh-100" id="login" type="submit"  [disabled]="!createForm.form.valid">Change Password
                 </button>&nbsp;
                 <button class="float-right lh-100" style="background-color:grey" [routerLink]="'/login'" >Back to Login</button>

             </td>
          </tr>
        </table>
      </form>

这是我的 .ts 代码。按钮更新方法

Update()
  {

   this.userservice.changePassword(this.email).pipe(first())
    .subscribe(
        data => 
        {
            if(!data.message)
            {
              this.errorMsg = data.message;
            }
           else …

我正在处理一个不断在控制台上抛出此错误的存储库： Uncaught TypeError: this.getExtraNgModuleProviders is not a function.

这些项目在“ng serve”上编译得很好，但它在控制台上显示一个空白页面和那个错误。我尝试了很多事情，但我找不到出路。

我试过卸载和安装@angular/compiler，但没有用。问题似乎是 JitCompiler 没有找到this.getExtraNgModuleProviders

我认为this.getExtraNgModuleProvidersJitCompiler 中的函数应该this._getExtraNgModuleProviders在 compiler.js 上。因为它周围的所有功能似乎都包含下划线。

更新：

我不认为函数名称与它有任何关系，因为其他开发人员可以很好地运行该项目，并且他们拥有相同的 Jit compiler.js 文件。供参考：当我单击控制台上的错误时，这是​​我需要的地方

 function JitCompiler(_metadataResolver, _templateParser, _styleCompiler, _viewCompiler, _ngModuleCompiler, _summaryResolver, _reflector, _compilerConfig, _console, getExtraNgModuleProviders) {
            this._metadataResolver = _metadataResolver;
            this._templateParser = _templateParser;
            this._styleCompiler = _styleCompiler;
            this._viewCompiler = _viewCompiler;
            this._ngModuleCompiler = _ngModuleCompiler;
            this._summaryResolver = _summaryResolver;
            this._reflector = _reflector;
            this._compilerConfig = _compilerConfig;
            this._console = _console;
            this.getExtraNgModuleProviders = getExtraNgModuleProviders;//<- error is pointed here
            this._compiledTemplateCache = new Map();
            this._compiledHostTemplateCache = …

我正在尝试随时间设置 datepicker 控件的值。无法完成

尝试转换为所需格式

应用程序组件.html

<input id="requestdate" type="date" class="form-control" formControlName="requestdate" 

app.component.ts

ngOnInit() {

this.loginForm = this.formBuilder.group({ 
                    requestdate : ['']
                  })

let date = new Date()
date = date.toLocaleDateString().substring(0,10)

this.loginForm.get('requestdate').patchValue(date)


}

无法看到转换后的日期

我有一个在 python 服务器上运行的 angular 7 应用程序，我们正在使用 angular-cli 构建项目文件。在构建时，我正在使用以下命令设置缓存突发选项。

ng build --prod --build-optimizer --aot --output-hashing=all

output-hashing=all 将根据角度文档处理缓存突发。虽然我提供了这个标志，但在部署我们的应用程序文件名后附加了哈希值（styles.a5169d3732258e921e2c.css、main.8dc0644c88c4fbf67797.js）但 index.html 文件总是显示缓存版本。

我想在客户端缓存除 index.html 之外的所有文件。我将如何做到这一点？