小编til*_*lly的帖子

所以我正在学习如何在Angular中测试服务,我试图在Angular文档中复制下面的例子.

let httpClientSpy: { get: jasmine.Spy };
let heroService: HeroService;

beforeEach(() => {
  // TODO: spy on other methods too
  httpClientSpy = jasmine.createSpyObj('HttpClient', ['get']);
  heroService = new HeroService(<any> httpClientSpy);
});

it('should return expected heroes (HttpClient called once)', () => {
  const expectedHeroes: Hero[] =
    [{ id: 1, name: 'A' }, { id: 2, name: 'B' }];

  httpClientSpy.get.and.returnValue(asyncData(expectedHeroes));

  heroService.getHeroes().subscribe(
    heroes => expect(heroes).toEqual(expectedHeroes, 'expected heroes'),
    fail
  );
  expect(httpClientSpy.get.calls.count()).toBe(1, 'one call');
});

我试图完全复制它,但它给了我以下错误:

src/app/services/find-locals.service.spec.ts(17,38)中的错误:错误TS2304:找不到名称'asyncData'.

有人可以帮我替换这个吗？或者告诉我在其他地方可能做错了什么？

以下是从Angular文档复制的测试文件:

import {FindLocalsService} from './find-locals.service';

import {HttpClient, HttpClientModule} …

我正在尝试用jwt-decode解码我的令牌,但我不能.它给了我以下错误.有谁知道为什么？

错误:未捕获(在承诺中):TypeError:jwt_decode_1.default不是函数TypeError:jwt_decode_1.default不是RoleGuardService.canActivate中的函数(role-guard.service.ts？d7c4:19)

import jwt_decode from 'jwt-decode';

canActivate(route: ActivatedRouteSnapshot): boolean {
        // this will be passed from the route config
        // on the data property
        const expectedRole = route.data.expectedRole;
        const token = localStorage.getItem('token');
        // decode the token to get its payload
        const tokenPayload = jwt_decode(token);
        console.log(tokenPayload);
        if (
            !this.auth.isAuthenticated() ||
            tokenPayload.role !== expectedRole
        ) {
            this.router.navigate(['login']);
            return false;
        }
        return true;
    }

我有一个确认密码formcontrol,我想验证.

当密码与确认密码输入中的值不同时,我想显示我的mat-error元素.为此我有一个叫做的函数equalPasswords().如果函数是相同的,那么我们收到true,如果没有,我们收到false.

<mat-form-field>
              <input matInput placeholder="Repeat password" [formControl]="password2" type="password">
              <mat-error *ngIf="password2.invalid && password2.hasError('required')">Password is required</mat-error>
              <mat-error *ngIf="!equalPasswords() && !password2.hasError('required')">Passwords need to match</mat-error>
</mat-form-field>

我检查了控制台,当我在密码框中输入两个不同的输入时,equalPasswords()返回false.但是它仍然没有显示DOM中的错误.

有人知道如何解决这个问题吗？

Signup.component.ts

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

export class SignUpComponent implements OnInit {

    mySignupForm: FormGroup;
    countries = countries;
    uniqueUsernameMessage;
    uniqueEmailMessage;
    formSubmitted = false;
    @Output() closeSubmenu = new EventEmitter();
    @ViewChild('select') select;

    constructor(
        private authService: AuthenticationService,
        private route: Router,
        private navigationService: NavigationService){}

    get firstName() { return this.mySignupForm.get('firstName'); }
    get lastName() { return this.mySignupForm.get('lastName'); …

所以我正在Angular中开发一个新组件，在ngOninit中，我在下面有以下异步函数...

必须先完成this.getUserProfile，然后才能调用this.getPrivateGroup（），然后要完成this.getPrivateGroup（），然后才能调用this.loadGroupPosts（）。我知道我可以在异步请求的回调中编写这些函数，但是我想知道是否存在一种方法可以将其保留在ngOnInit中以使其更清洁？

有人有主意吗？

ngOnInit() {

    this.getUserProfile();

    // my-workplace depends on a private group and we need to fetch that group and edit
    // the group data before we proceed and get the group post
    if (this.isItMyWorkplace) {
      this.getPrivateGroup();
    }
    this.loadGroupPosts();
  }

getUserProfile() {
    this._userService.getUser()
      .subscribe((res) => {
        this.user = res.user;
        console.log('log user', this.user);
        this.profileImage = res.user['profile_pic'];
        this.profileImage = this.BASE_URL + `/uploads/${this.profileImage}`;
      }, (err) => {
        this.alert.class = 'alert alert-danger';
        if (err.status === 401) {
          this.alert.message = err.error.message;
          setTimeout(() => { …

所以我在玩 Angular 一点，我想在我的应用程序中出现错误时向我的应用程序添加材料小吃店。

所以，我有我的主页，我的导航是一个 z-index 为 3000 的叠加层。在导航中有登录选项（见下图）。我故意输入了错误的登录数据以触发错误处理程序并使快餐栏出现。

小吃店确实出现了。但是，它隐藏在导航后面。如何让它显示在导航上方？我尝试将 10000 的 z-index 添加到使用以下代码处理小吃店的组件的 scss 中：

* {
z-index: 10000;
}

和

::root {
z-index: 10000;
}

但没有一个奏效。有谁知道如何做到这一点？

App.component.ts: user-navigation 是我处理登录的地方。 Notifications 包含了snackbar 的逻辑

<navigation></navigation>
<user-navigation>

</user-navigation>
<router-outlet></router-outlet>
<notifications></notifications>

Notifications.component.ts ，这有效，它打开小吃栏，但它隐藏在用户导航后面

import { Component, OnInit } from '@angular/core';
import {MatSnackBar} from '@angular/material';
import {NotificationService} from '../services/notification.service';

@Component({
  selector: 'notifications',
  templateUrl: './notifications.component.html',
  styleUrls: ['./notifications.component.css']
})
export class NotificationsComponent implements OnInit {

  constructor(public snackBar: MatSnackBar, private notificationService: NotificationService) { }

  ngOnInit() {
    this.notificationService.notification$ …

我使用 ngb 下拉列表来显示我的任务可以具有的不同状态（“待办事项”、“进行中”、“完成”）。一切工作正常，但有一个小问题仍然困扰着我。单击其中一个选项后，我希望关闭下拉菜单。目前它仍然开放。当我点击这个菜单时如何关闭它？

正如您在下面看到的，我更改了两个帖子的状态，但下拉菜单保持打开状态，这并不是我真正想要的

模板代码

<div class="col-md-4 text-right padding-topright" style=" object-fit: cover;">
                    <div ngbDropdown class="d-inline-block">
                      <button class="btn btn-sm kbn-todo" *ngIf="post.task.status == 'to do'" id="dropdownDone" style=" color: white;"
                      ngbDropdownToggle>{{post.task.status}}</button>
                      <button class="btn btn-sm kbn-working" *ngIf="post.task.status == 'in progress'" id="dropdownDone" style=" color: white;"
                      ngbDropdownToggle>{{post.task.status}}</button>
                      <button class="btn btn-sm kbn-done" *ngIf="post.task.status == 'done'" id="dropdownDone" style=" color: white;"
                      ngbDropdownToggle>{{post.task.status}}</button>
                      <div ngbDropdownMenu aria-labelledby="dropdownToDo">
                        <button class="dropdown-item pumpkin-orange-bg" (click)="OnMarkTaskToDo(i, this.post._id)">To Do</button>
                        <button class="dropdown-item" (click)="OnMarkTaskInProgress(i, this.post._id)">In Progress</button>
                        <button class="dropdown-item" (click)="OnMarkTaskCompleted(i, this.post._id)">Done</button>
                      </div>
                    </div>
                    <p class="small font-weight-bold" style="margin-top: 5px" *ngIf="post.task?.due_to != …

我有一个输入字段，我在其中绑定了一个格式化函数，每当该字段失去焦点时就会触发该函数。

我的目标是从输入中删除所有前导零，并且我确实通过以下行实现了这一点。但是，当用户想要输入单个 0 或类似 0000 的内容时，我仍然希望该字段以值 0（单个）结尾。它将.replace(/^0+/, '')删除所有零并仅返回一个空字符串。有人知道什么正则表达式可以处理这个问题吗？

const formatNumber = ($field) => {
var number = $field.val().replace(/\./g, '').replace(/\s/g, '').replace(/^0+/, '');
return number;
};

注意：if(number === "") number = "0"不是一个选项。

edit1: : 我注意到似乎有点混乱。例如“0009825”需要变成9825而不是09825。我想要前面的0的唯一情况是当值只是零时。

所以我开始使用node.js请求模块向youtube api发出请求。我可以自己创建以下查询字符串的链接，但是我很确定有一个快捷方式。有人知道吗？

youtube API链接

'https://www.googleapis.com/youtube/v3/search?part=snippet&q=black%20panther&key=AIzaSyD4shfocwn-Ed3Feuoo9fG3d2K2GjHmKeI&maxResults=20&order=viewCount&type=video'

因此，我正在寻找一种将上述查询字符串添加到我的http请求的快捷方式

request('https://www.googleapis.com/youtube/v3/search', function (error, response, body) {

});

所以我正在努力提高我的角度技能,我目前正在一个论坛上工作.

我有想法向用户显示目前有多少用户在线.当他们进入网站的论坛部分时,我更新我的数据库以将一个成员添加到计数中,当他们离开时,它从同一个数据库中扣除一个.

当我向ngOnInit()和ngOnDestroy中添加了一个加号的逻辑时,我想我已经想到了这一切,但后来我注意到当我用f5刷新页面时ngOndestroy()没有被触发.结果是它不断向成员计数添加成员,即使它始终是查看页面的同一个人.

当该人导航到我的SPA的另一部分并刷新页面时,如何确保计数扣除一个？

我的代码:在ngOnDestroy中我执行服务器请求以在数据库中扣除一个,然后取消订阅组件中的所有observable

export class ForumCountComponent implements OnInit, OnDestroy{

    data;
    ngUnsubscribe = new Subject();

    constructor(private authService: AuthenticationService, private forumService: ForumService){

    }

    ngOnInit(){
        let loggedIn = this.authService.isLoggedIn();

        this.forumService.forumCountPlus(loggedIn)
            .takeUntil(this.ngUnsubscribe)
            .subscribe((data) => {
                this.data = data;
                console.log(data);
            })
    }

    ngOnDestroy(){
        let loggedIn = this.authService.isLoggedIn();

        this.forumService.forumCountMin(loggedIn)
            .takeUntil(this.ngUnsubscribe)
            .subscribe((data) => {
                this.data = data;
                this.ngUnsubscribe.next();
                this.ngUnsubscribe.complete();
            })
    }

我一直在推迟解决我已经有一段时间的错误了。我有以下聊天窗口：

我显示消息的窗口是一个单独的组件（chat-window.component.ts）。我想使用ngOnChanges滚动到底部。

当我们从父组件接收到带有消息的会话（通过异步请求从服务器接收消息）时，我们想要滚动到window元素的底部。我们通过this.scrollToBottom()在ngOnChanges生命周期挂钩中调用类的方法来实现。

确实会调用this.scrollToBottom，但不会滚动到元素的底部。有人知道为什么吗？

chat-window.component.ts：在ngOnchanges中，我们在调用this.scrollToBottom（）之前会做一些同步处理

export class ChatboxWindowComponent implements OnChanges, OnInit, AfterViewChecked {

  @Input('conversation') conversation;
  @ViewChild('window') window;

  constructor() { }

  ngOnChanges() {
    // If the date separators have already been added once, we avoid doing it a second time
    const existingDateObj = this.conversation.messages.findIndex((item, i) => item.dateObj);

    if (existingDateObj === -1) {
      this.conversation.messages.forEach( (item, index, array) => {
        if (index !== 0) {
          const date1 = new Date(array[index - 1].date);
          const date2 = new Date(item.date);

          if (date2.getDate() !== date1.getDate() …