标签: angular7

我有一个由这种垂直结构组成的应用程序：导航栏、搜索部分和带有结果的表格。这些树元素中的每一个都占用了所需的空间，而无需使用固定大小。更多的搜索部分有隐藏的子部分，所以它的大小可以随着时间的推移而改变。

我想要做的是：我希望这三个部分独立调整它们的高度以占据所有可用空间。但是因为我可以在表格上有很多结果，所以最终需要一个垂直滚动条。所以我想看到的唯一滚动条是在表格的结果部分。

如果我设置

溢出：自动

在全局 CSS 上，如果表格有太多结果，我会看到一个全局滚动条。

如何强制表格使用屏幕上的剩余空间并在需要时显示滚动条？

我正在使用 Angular 7“拖放”的新功能，我遵循了官方文档上的所有步骤：https : //material.angular.io/cdk/drag-drop/overview

但我收到此错误：**

未捕获的错误：模板解析错误：'cdk-drop' 不是已知元素： 1. 如果 'cdk-drop' 是一个 Angular 组件，则验证它是否是该模块的一部分。2. 如果'cdk-drop' 是一个Web 组件，则将'CUSTOM_ELEMENTS_SCHEMA' 添加到该组件的'@NgModule.schemas' 以抑制此消息。

**

这是我的 app.component.html 代码：

<cdk-drop cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
  <div class="example-box" *ngFor="let movie of movies" cdkDrag>{{movie}} 
  </div>
</cdk-drop>

这是我的 app.component.ts 代码：

import { Component } from '@angular/core';
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    movies = [
    'Episode I - The Phantom Menace',
    'Episode II - Attack of the …

在我的Interceptor文件中，我收到如下错误：

ERROR in ./src/app/auth/auth.interceptor.js 8:0
Module parse failed: Unexpected character '@' (8:0)
You may need an appropriate loader to handle this file type.
| import { UserService } from "./../shared/user.service";
|
> @Injectable()
| export class AuthInterceptor implements HttpInterceptor {
|

如何解决这个问题？这是我的 ts 文件：

import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { tap } from "rxjs/operatos";
import { Router } from "@angular/router";

import { UserService } from "./../shared/user.service";

@Injectable() …

对于我当前的项目，我正在尝试将拖动元素从一个位置拖动到一个 div 内的另一个位置。为此，我使用了 Angular Material 7 CDK 拖放功能。它在整个页面上拖动，但只想在特定的 div 内拖动。但是我在 Angular Material 7 CDK 拖放中没有看到任何控制边界的选项。

谁能告诉我如何控制材料中的边界或建议其他一些可用于 angular 7 的插件。？

谢谢。

我一直在为我的一个网页开发步进器元素，并尝试实现该.reset()功能，以便使用材料设计文档 ( https://material.angular.io/components/)将表单恢复为空白状态步进器/概述)

按照多表单组示例，我可以看到 .reset 通过让您回到第一步并清除表单来正常工作。但是，在尝试使用单一表单结构时，我发现这stepper.reset()会让您回到第一步，但并没有清除表单。

我尝试标记重置按钮，Type="button"因为单个表单需要在“下一步”和“后退”按钮上进行标记，以防止单击按钮时提交表单，但没有看到任何更改。

我希望在单击重置时发生这两个操作，但我不确定是否必须编写手动重置功能，或者我的代码中是否有错误。

对此的任何帮助将不胜感激。谢谢！

创建.component.html

<form [formGroup]="formGroup" class="content-container" (ngSubmit)="onSubmit()">
  <h1>{{title}}</h1>
  <mat-vertical-stepper #stepper>
    <mat-step formGroupName="someFieldGroup" [stepControl]="someFieldGroup">
      <ng-template matStepLabel>Fill out Field</ng-template>
      <mat-form-field>
        <input matInput placeholder="Some Field" formControlName="someFieldCtrl" name="someFieldName" required>
        <mat-error>This field is required</mat-error>
      </mat-form-field>
      <div>
        <button type="button" mat-button matStepperNext>Next</button>
      </div>
    </mat-step>
    <mat-step formGroupName="anotherFieldGroup" [stepControl]="anotherFieldGroup">
      <ng-template matStepLabel>Fill out Field</ng-template>
      <mat-form-field>
        <input matInput placeholder="Another Field" formControlName="anotherFieldCtrl" name="anotherFieldName" required>
        <mat-error>This field is required</mat-error>
      </mat-form-field>
      <div>
        <button type="button" mat-button matStepperPrevious>Back</button>
        <button type="button" …

我的组件代码如下

import {Component, EventEmitter, OnInit, Input, Output} from '@angular/core';
import {Input} from '@angular/compiler/src/core';

@Component({
    selector: 'like',
    templateUrl: './like.component.html',
    styleUrls: ['./like.component.css']
})
export class LikeComponent implements OnInit {
    @Input('isActive') isSelected: boolean;
    @Input('likesCount') likesCount: number;
    @Output('change') click = new EventEmitter();


    constructor() {}
    ngOnInit() {}

    isLiked() {}

    onClick() {
    //Ignore below incomplete code 
        if (!this.isSelected) {

        } else {

        }
        this.isSelected = !this.isSelected;
        this.click.emit({newValue: this.isSelected});
    }

    getStyle() {
        let style: string;
        if (this.isSelected) {
            style = 'deeppink';
        } else {
            style = '#ccc'; …

当用户使用 mat Datepicker 选择日期时，我想以 dd/MM/YYYY 格式显示日期，但是当我在 Datepicker 中使用 Datepipe 时，它​​在我们选择时不显示任何日期

   <mat-form-field class="box">
    <input matInput [matDatepicker]="picker" placeholder="Generate Date" maxlength="10px" [readonly]="isNew1"
      [ngModel]="quotation?.generateDate | date: 'dd/MM/yy'"
      (ngModelChange)="quotation.generateDate=$event" [ngModelOptions]="{standalone: true}">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker [disabled]="isNew1" #picker></mat-datepicker>
  </mat-form-field>

我有两个组件和一个服务。我想使用该服务来存储一个公共值。StripeComponent设置服务中的值。我收到以下错误：

无法读取未定义的属性“setAddress”

这是我的组件：

import { Component, ViewChild, OnInit } from '@angular/core'
import { NgForm } from '@angular/forms'

import { Address } from '../_models/address'
import { Observable } from 'rxjs';
import { ConfigService } from '../_services/config.service';

declare var Stripe;
@Component({
  selector: 'app-stripe',
  templateUrl: './stripe.component.html',
  styleUrls: ['./stripe.component.css'],
  providers: [ConfigService]
})
export class StripeComponent implements OnInit {
  public address = 
    new Address(
  {
    name:"",
    address_city: "",
    address_line1: "",
    address_line2: "",
    address_state: "",
    address_zip: "",
    address_country: ""
  }
)
configService: ConfigService 

  constructor() …

我开始优化我的代码，我想取消订阅我在 ngOndestroy 中的订阅。我有多个订阅。问题是当我想调用 add() 方法来添加其他子订阅时，它说无法读取未定义的属性“添加”。我在这里简化了我的代码，所以你只能看到重要的东西。

import {Subscription} from 'rxjs';

export class DashboardComponent implements OnInit, OnDestroy {
     private subscription: Subscription;
}

ngOnInit() {
   this.getData();
   this.getFeed();
}

ngOndestroy {
if (this.subscription) {
   this.subscription.unsubscribe();
   console.log(this.subscription);
   }
}

getData() {
   const subscription = this._authService.currentCompanyId.subscribe((newCompanyId) => {
            this.driverSubs(newCompanyId);
            this.vehicleSubs(newCompanyId);
        });
        this.subscription.add(subscription);
    }

   driverSubs(newCompanyId) {
        const subscription = this._driversService.getAllDrivers(newCompanyId).subscribe((data) => {
            this.getDataForDrivers(data);
        });
        this.subscription.add(subscription);
    }

    vehicleSubs(newCompanyId) {
        const subscription = this._vehiclesService.getAllVehicles(newCompanyId).subscribe((data) => {
            this.getDataForVehicles(data);
        });
        this.subscription.add(subscription);
    }
}

getFeed() {
    this.feedSubs();
    this.feedTachoSubs();
}

feedSubs() {
    const …

我正在尝试在 angular7 中使用 jquery 实现 bootstrap4 popover。我在 index.html 中包含了“popper.js”，也使用 npm 包含了。但它不起作用。

未捕获的类型错误：jquery__WEBPACK_IMPORTED_MODULE_2__(...).popover 不是函数

此错误仅出现在控制台中。

HTML:(sample.component.html)

<button id="option2" autocomplete="off" data-toggle="popover"> Public</button>

Jquery: (sample.component.ts)

import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery';

@Component({
  selector: 'app-sample',
  templateUrl: './sample.component.html',
  styleUrls: ['./sample.component.css']
})
export class SampleComponent implements OnInit {

  constructor() { }   
  ngOnInit() {   
    $(document).ready(function(){   
      $('[data-toggle="popover"]').popover();     
      $('#option2').popover({
         html: true,
        content: function() {
          return $("#div").html();
        },
         placement: 'bottom'
      });            
    });
  }

如何在 angular 7 中实现 bootstrap popover？