标签: angular6

在这里，我使用Angular-Material的环境是 : Angular CLI: 6.0.5, Node: 10.1.0, OS: win32 x64，Angular: 6.0.3并且我想要这样的输出：

为了实现完全相同的顶部导航栏，我有mat-toolbar如下：

在 .html 中

 <mat-toolbar class="topbar telative mat-toolbar mat-primary mat-toolbar-single-row" color="primary"  ng-reflect-color="primary" style="flex-direction: row; box-sizing: border-box; display: flex;position: fixed;" [class.mat-elevation-z24]="isActive">
    <button mat-icon-button (click)="snav.toggle()"><mat-icon>menu</mat-icon> 
    </button>
    <h1 class="example-app-name">Admin Panel</h1>
 </mat-toolbar>

在 .ts 中

我只有一个 isActive 属性

 isActive = true;

我的输出绝对没问题，但mat-toolbar没有覆盖屏幕的整个宽度，因此垂直滚动条正好位于mat-toolbar. 我想要在我的下方有一个滚动条，mat-toolbar如上图所示。如何将宽度设置mat-toolbar为全屏。

我正在使用带有 angular6 的 bootstrap4 轮播，但出现以下错误。由于我使用 bootstrap，所以我也必须使用 jQuery。我已经通过 npm 安装了 bootsrap、jquery 模块。我在 stackoverflow 上检查了很多步骤，但没有帮助。控制台中的错误是AppComponent.html:4 ERROR TypeError: jquery__WEBPACK_IMPORTED_MODULE_1__(...).carousel is not a function

ERROR in src/app/header/header.component.ts(17,20): error TS2339: Property 'carousel' does not exist on type 'JQuery<HTMLElement>'.

MyComponent.ts 文件：

import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery';
@Component({
   selector: 'app-header',
   templateUrl: './header.component.html',
   styleUrls: ['./header.component.css']
})

export class HeaderComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  ngAfterViewInit() {
    $('.carousel').carousel();
  }
}

下面是 HTML 代码：

    <div class="bd-example">
  <div …

我试图在录制 2500 毫秒后生成一个音频文件（.mp3 格式）。我正在使用navigator并且主要使用HTML5音频。我正在生成一个用于下载该文件的链接。 window.URL.createObjectURL(stream)返回blob:http://localhost:4200/e6a5a51e-ae11-4b77-9b2c-06251b13ca39。我不知道如何将其转换为能够下载的文件。

录音功能是这样的：

  this.record = () => {     
      var headers = new Headers();
      var browser = <any>navigator;      
      var obj = {
        audio: true,
        sampleSize: 16
      };

      var audio = document.createElement('audio');      

      browser.getUserMedia = (browser.getUserMedia || browser.webkitGetUserMedia || browser.mozGetUserMedia || browser.msGetUserMedia);
      browser.mediaDevices.getUserMedia(obj).then(stream => {            
        setTimeout(function(){        
          var track = stream.getTracks()[0]; 
          var source = window.URL.createObjectURL(stream);   // returns blob:http://localhost:4200/e6a5a51e-ae11-4b77-9b2c-06251b13ca39
          audio.src = source;      
          audio.autoplay= true; 
          var link = document.createElement("a");
          link.href = source;
          link.download = 'audio_recording_' + new Date().getTime() …

在此演示中，我为自定义验证器创建了一个示例表单，这里有“起始日期”和“截止日期”以及“起始时间”和“截止时间”，工作正常：对于“起始日期”和“截止日期”验证工作正常并显示错误消息。

问题：当选择相同的日期时，例如）2018 年 7 月 21 日作为起始日期，并且“To date e”和“In from Time”为 4:00 AM，“To Time”为 3:00AM，条件得到满足，但没有显示错误消息。在实施过程中出现了一些问题，任何人都可以帮我解决吗？

在 html 中，我给出了验证消息，但没有显示。

To Time:
<input type="time" formControlName="ToTime">
    <mat-error *ngIf="DaterForm.get('ToTime').hasError('InValidToTime')">FromTime Should be less than ToTime if choose a same date</mat-error>

在组件中：

 DaterForm : FormGroup;

constructor(private fb:FormBuilder){
}
   ngOnInit(){

 this.DaterForm = this.fb.group(
{
  FromDate:['',[AppCustomDirective.fromDateValidator]], // validation working fine
  FromTime:[''],
  ToDate:['',[AppCustomDirective.ToDateValidator]],// validation working fine
  ToTime:['']
},{validator:[AppCustomDirective.timeValidator] // validation not working
}

自定义验证：

import { AbstractControl, FormControl, FormGroup, ValidatorFn, Validators } from '@angular/forms';

export class AppCustomDirective …

我正在尝试角材料数据表。

正如我们所知，默认情况下每行都会发生过滤。

如果我想过滤特定列，那我该怎么办？

我是否应该编写获取所有记录的方法，然后对其进行迭代并比较特定列？

组件.ts

ngOnInit() {
    this.service.getUser().subscribe( results => {
        if(!results){

          return;
        }
        console.log(results);
        this.dataSource = new MatTableDataSource(results);
        this.dataSource.sort = this.sort;
    })


onSearchClear(){
    this.searchKey="";
    this.applyFilter();
  }

  applyFilter(){
    this.dataSource.filter = this.searchKey.trim().toLowerCase();
  }

组件.html

<mat-form-field class="search-form-field">
      <input matInput [(ngModel)]="searchKey" placeholder="search by userName" (keyup)="applyFilter()">
    </mat-form-field>

我正在使用ngx-cookie-service包

{
    "user": [
        {
            "id": 109,
            "name": "name1",
            "job" : "job name"

        }
    ],
    "token":"xxxx"
}

    this.cookieService.set( 'user_id', result.user.id );
    this.cookieService.set( 'user_name', result.user.name );
    this.cookieService.set( 'user_job', result.user.job );

如何将其保存为 JSON 数组而不是保存个人？

喜欢 this.cookieService.set( 'user', result.user );

我将 angular6 与 Angular 材料设计模板一起使用。目前，我的结果如下，

目前，我有粘性页眉和页脚，但滚动数据集对用户不友好。 issue-data-html是我的 HTML 文件，

<div class="mainDiv">
  <div class="mat-elevation-z8 issueDataCard">
    <div style="position: relative; z-index: 1; " class="app-list-header" fxLayout="row" fxLayoutAlign="start baseline"
      fxLayoutGap="8px" fxLayoutGap.gt-xs="24px">
      <div fxLayout="column" fxLayoutAlign="start baseline" fxLayoutGap="24px" fxFlex="grow" fxLayout.gt-xs="row">
        <div class="app-list-name">
          <h3>
            Issue Statuses
          </h3>
        </div>
        <div class="vl"></div>
        <!--Search-->
        <mat-form-field class="app-filter-input" floatPlaceholder="never" fxFlex>
          <mat-icon class="app-filter-input-icon" matPrefix>search</mat-icon>
          <input matInput #filter placeholder="Search&hellip;" (keyup)="applyFilter($event.target.value)">
        </mat-form-field>
      </div>

      <div fxFlex="none">
        <button mat-mini-fab style="background-color: #281c7b;" *ngIf="showAddIssueDataIcon"
          (click)="addIssueData(null)" matTooltip="Add Issue Data">
          <mat-icon>add</mat-icon>
        </button>
      </div>

      <button class="app-column-filter" type="button" mat-icon-button [matMenuTriggerFor]="columnFilter">
        <mat-icon style="font-size: 130%; …

我正在尝试在 Angular 中上传图片或视频。我想显示它的预览。我在预览图像时没有问题，我的问题是如何预览视频？请看这个stackblitz链接：

点击这里

代码

 onSelectFile(event) {
    if (event.target.files && event.target.files[0]) {
      var reader = new FileReader();

      reader.readAsDataURL(event.target.files[0]);

      reader.onload = (event) => {
        this.url = event.target.result;
      }
    }
  }

import {
    Observable,
    BehaviorSubject
} from 'rxjs';
import {
    finalize,
    share
} from 'rxjs/operators'

export class someComponent() {

    public count$ = new BehaviorSubject < any > (0);

    public constructor() {
        this.shareResponse()
            .pipe(
                finalize(() => {
                    console.log('finalize called');
                }))
            .subscribe((event: any) => {
                // Do something
            });
    }
    public shareResponse(): Observable < any > {
        return this.count$.pipe(share());
    }
    public countChanged(event) {
        this.count$.next(event);
    }
}

HTML：

    <some-tag(countChanged) = (countChanged($event)) > < /some-tag>

我在网上做了一些研究，我发现我面临的问题是正在创建多个服务实例，我想避免这种情况。有人可以看看我的代码并找出我需要进行的更改。

使用正在复制的主要服务的第二项服务。

export class SecondaryService {
    constructor(private primarySvc: IPrimaryService){
        this.primarySvc.someSubject.subscribe(() => {});
    }
}

主要服务（正在复制的服务）

export class PrimaryService {
    someSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
    constructor(){}
}

主要服务提供商

@Injectable()
export class PrimaryServiceProvider extends PrimaryService {
     constructor(){
          super();
     }
}

二级服务提供商

@Injectable()
export class SecondaryServiceProvider extends SecondaryService {
    constructor(private PrimaryProvider: PrimaryServiceProvider){
        super(PrimaryProvider);
    }
}

app.module.ts

 @NgModule({
     declaration: [SecondaryComponent],
     exports: [SecondaryComponent],
     imports: [BrowserModule],
     providers: [SecondaryServiceProvider, PrimaryServiceProvider ]
 })
 export class SearchModule{}

现在我正在尝试使用我在本地环境中制作的组件，它看起来像这样：

app.module.ts

 @NgModule({
     declaration: [AppComponent, HomeComponent],
     imports: [SearchModule, BrowserModule],
     providers: [PrimaryServiceProvider, SecondaryServiceProvider], …