标签: angular7

有没有办法动态创建拖放区？我在使用ngFor和cdkDropList时遇到了一些麻烦.

这是我的第一个列表和可拖动元素:

       <div class="subj-container" 
        cdkDropListOrientation="horizontal" 
        cdkDropList 
        #subjectList="cdkDropList"
        [cdkDropListData]="subjects"  
        [cdkDropListConnectedTo]="[lessonList]" 
        (cdkDropListDropped)="drop($event)"
        >
            <div class="subject" *ngFor="let subject of subjects" cdkDrag>
                {{subject.name}}
            </div>
        </div>

这是我的第二个清单:

          <div class="conta" cdkDropList
                #lessonList="cdkDropList"
                [cdkDropListData]="appointment.lessons"
                [cdkDropListConnectedTo]="[subjectList]"
                (cdkDropListDropped)="drop($event)">
                    <div class="sub" cdkDrag *ngFor="let lesson of appointment.lessons">
                        {{lesson.name}}
                </div>
           </div>

现在,带有'conta'类的div在*ngFor中.

我想,我的问题是我的第二个清单.如果我将一个元素从第二个列表拖到列表一,它可以正常工作,但如果我尝试将元素从列表一拖到第二个列表中的任何列表实例,它就无法识别该元素是否被拖动.在这里演示:

我在这里做错了吗？打字稿部分工作正常.

谢谢

我正在研究小型Web应用程序,我使用angular 7和asp.net核心web api作为后端.我正在尝试使用angular发出http post请求.我的服务返回字符串(令牌),当我收到它时,我想在警告框中显示它.

我已经测试了我的服务,Postman一切都按预期工作.

从浏览器我的请求成功映射到控制器的操作方法.我在这个方法体中设置了断点,它成功返回令牌没有任何问题.

但httpclient返回错误:

[object Object]

在浏览器控制台中我看到:

POST https://localhost:44385/api/auth net::ERR_INVALID_HTTP_RESPONSE

我有两个方法(for POST和for GET)在服务类中注入组件.它们看起来像这样:

logIn(username: string, password: string) {

    const encodedCredentials = btoa(username + ':' + password);

    const httpOptions = {
        headers: new HttpHeaders({
            "Authorization": "Basic " + encodedCredentials,
            "Access-Control-Allow-Origin":"*"
        }),
        responseType: 'text' as 'text'
    };

    this.http.post(this.urlBase + 'auth', null , httpOptions)
    .subscribe(result => {
        alert(result);
    }, error => {
        alert(error); // [object Object]
    });
}

get(){
    return this.http.get(this.urlBase + 'auth', {responseType: 'text'});
} …

有没有办法将反应式表单组重置为其初始值而不是使用.reset()方法将其清空？

我有以下stackblitz，其中默认选择的值为Parent，如果用户将其更改为姐妹，并希望将表单设置为初始值，请单击重置按钮来执行此操作。

目前，我尝试过：

this.formGroup.reset();
//Or
this.formGroup.markAsPristine;
//Or
this.formGroup.markAsTouched

在.reset()完全地重置表单。

PS 有些人可能会说用户可以重新选择默认值而不是点击重置按钮。但就我而言，我有一个巨大的用户表单，他需要在其中更新他的信息，如果他在某些值中弄错了，他可能需要重置为初始值。

我正在尝试运行服务器，并在localhost：8000上加载app.component.html。相反，我收到此错误

editor.js：7992未捕获的错误：预期“样式”为字符串数组。位于> CompileMetadataResolver.push ../ node_modules/@angular/compiler/fesm5/compiler.j> s.CompileMetadataResolver.getNonNormalizedDirectiveMetadata >>（compiler.js：17325）处的assertArrayOfStrings（compiler.js：7992）处> CompileMetadataResolve ./node_modules/@angular/compiler/fesm5/compiler.j>s.CompileMetadataResolver._getEntryComponentMetadata（compiler.js：17970）在compiler.js：17630在Array.map（）在> CompileMetadataResolver.push ../ node_modules / @ angular / compiler / fesm5 / compiler.j> s.CompileMetadataResolver.getNgModuleMetadata（compiler.js：17630），位于> JitCompiler.push ../ node_modules/@angular/compiler/fesm5/compiler.js.JitCompile> r._loadModules（com .js：24899），网址为> JitCompiler.push.。

我尝试弄乱语法并检查了angular.json文件。

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

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

关于如何解决这个问题的任何想法？这阻止了我加载Google

我moment.js用来更改应用程序的本地日期格式，但出现以下错误：

导入库时，“ moment”没有导出的成员“ default”。

下面是我的代码：

import {Inject, Injectable, Optional} from '@angular/core';
import {DateAdapter, MAT_DATE_LOCALE, MatDateFormats} from '@angular/material';
import * as _moment from 'moment';
import {default as _rollupMoment, Moment} from 'moment';

const moment = _rollupMoment || _moment;

嗨，大家好我是新手。实际上，我正在尝试从服务中订阅数据，然后将该数据传递给我的表单控件（例如，它就像一个编辑表单）。

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormArray, FormControl } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { QuestionService } from '../shared/question.service';

@Component({
  selector: 'app-update-que',
  templateUrl: './update-que.component.html',
  styleUrls: ['./update-que.component.scss']
})
export class UpdateQueComponent implements OnInit {

  questionsTypes = ['Text Type', 'Multiple choice', 'Single Select'];
  selectedQuestionType: string = "";
  question: any = {};

  constructor(private route: ActivatedRoute, private router: Router,
    private qService: QuestionService, private fb: FormBuilder) { 

  }

  ngOnInit() {
      this.getQuebyid();
  }

  getQuebyid(){ …

我尝试添加rowSpan and colSpan在Angular material Table header。任何人都可以帮助我实现它。

下面是我想使用材料表获得的附加标题

我正在尝试ng e2e使用 chrome 作为浏览器在 Angular 7 上运行。我运行了命令npm install -g protractor和webdriver-manager update. 它最终下载并运行 chromedriver=76.0.3809.12 但我不可能在我的机器上更新 chrome 本身。我在 chrome 74 上。

我已经尝试过 webdriver-manger update, webdriver-manager update --versions.chrome 2.46, webdriver-manager update --versions.chrome 74.0.3729.6 但即使我删除了 chrome 76 文件，node_modules\protractor\node_modules\webdriver-manager\selenium\但每次我运行时它们总是重新安装ng e2e

量角器配置文件

exports.config = {
  allScriptsTimeout: 11000,
  specs: [
    './src/**/*.e2e-spec.ts'
  ],
  capabilities: {
    'browserName': 'chrome'
  },
  directConnect: true,
  baseUrl: 'http://localhost:4200/',
  framework: 'jasmine',
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000,
    print: function() {}
  },
  onPrepare() {
    require('ts-node').register({ …

我的应用程序需要很长时间才能构建生产使用 ng build --prod

有时它甚至失败了

致命错误:堆限制附近的无效标记 - 压缩分配失败 - JavaScript堆内存不足

我能做些什么来缩短构建时间吗？

我上传文件FORMDATA在角7使用此代码HttpClient为http:

sendImageFile(subUri: string, id: number, fileToUpload: File): Observable<any> {
  const formData: FormData = new FormData();
  formData.append('file', fileToUpload, fileToUpload.name);
  formData.append('photoalbum_id', id.toString() );
  // ... some other .append()

  const customHeaders = new HttpHeaders({
    'Authorization': 'Bearer' + localStorage.getItem('token'),
    'Accepted-Encoding': 'application/json'
  });

  const customOptions = {
    headers: customHeaders,
    reportProgress: true
  };

  return this.http.post(this.url, formData, customOptions)
    .pipe(
      map( (event: HttpEvent<any>) => this.getEventMessage(event, fileToUpload)),
      tap(message => this.showProgress(message)),
      // last(),
      catchError(this.handleError));
}

private showProgress(message: any) {
  // ...
}

private getEventMessage(event: HttpEvent<any>, file: …