Angular 视图不以角度显示

您好，如果单击“匹配”，则我的项目中的显示卡有问题。这样的消息将显示为红色：

我应该有一个像下面的照片一样的视图

这是我的成员列表.resolver.ts

import { catchError } from 'rxjs/operators';
import { Observable, of } from 'rxjs';
import { UserService } from '../_services/user.service';
import { User } from '../_models/user';
import { Injectable} from '@angular/core';
import {ActivatedRouteSnapshot, Resolve, Router} from '@angular/router';
import { AlertifyService } from '../_services/alertify.service';

@Injectable()
export class MemberListResolver implements Resolve<User[]>{
  constructor(private userService: UserService, private router: Router, private alertify: AlertifyService){}

  resolve(route: ActivatedRouteSnapshot): Observable<User[]>{
    // tslint:disable-next-line:no-string-literal
    return this.userService.getUsers().pipe(
      catchError(error => {
        this.alertify.error('Problem retrieving data');
        this.router.navigate(['home']);
        return of(null);
      })
      );
  }
}

import { catchError } from 'rxjs/operators';
import { Observable, of } from 'rxjs';
import { UserService } from '../_services/user.service';
import { User } from '../_models/user';
import { Injectable} from '@angular/core';
import {ActivatedRouteSnapshot, Resolve, Router} from '@angular/router';
import { AlertifyService } from '../_services/alertify.service';

@Injectable()
export class MemberDetailResolver implements Resolve<User>{
  constructor(private userService: UserService, private router: Router, private alertify: AlertifyService){}

  resolve(route: ActivatedRouteSnapshot): Observable<User>{
    // tslint:disable-next-line:no-string-literal
    return this.userService.getUser(route.params['id']).pipe(
      catchError(error => {
        this.alertify.error('Problem retrieving data');
        this.router.navigate(['/members']);
        return of(null);
      })
      );
  }
}

auth.service.ts

import { Injectable } from '@angular/core';
import * as alertify from 'alertifyjs';

@Injectable({
  providedIn: 'root'
})
export class AlertifyService {

constructor() { }

  // tslint:disable-next-line:typedef
  confirm(mesaage: string, okCallback: () => any) {
    alertify.confirm(mesaage, (e: any) => {
      if (e) {
        okCallback();
      } else{}
    });
  }

  // tslint:disable-next-line:typedef
  success(message: string){
    alertify.success(message);
  }

  // tslint:disable-next-line:typedef
  error(message: string){
    alertify.error(message);
  }

  // tslint:disable-next-line:typedef
  warning(message: string){
    alertify.warning(message);
  }

  // tslint:disable-next-line:typedef
  messagee(message: string){
    alertify.message(message);
  }


}

import { environment } from '../../environments/environment';
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';
import { JwtHelperService } from '@auth0/angular-jwt';



@Injectable({
  providedIn: 'root'
})
export class AuthService {
  baseUrl = environment.apiUrl + 'auth/';
  jwtHelper = new JwtHelperService();
  decodedToken: any;

constructor(private http: HttpClient) { }

// tslint:disable-next-line:typedef
login(model: any) {
  return this.http.post(this.baseUrl + 'login', model).pipe(
    map((response: any) => {
      const user = response;
      if (user) {
        localStorage.setItem('token', user.token);
        this.decodedToken = this.jwtHelper.decodeToken(user.token);
        console.log(this.decodedToken);
      }
    })
  );
}

// tslint:disable-next-line:typedef
register(model: any) {
  return this.http.post(this.baseUrl + 'register', model);
}

// tslint:disable-next-line:typedef
loggedIn() {
  const token = localStorage.getItem('token');
  return !this.jwtHelper.isTokenExpired(token);
}

}

import { Observable } from 'rxjs';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { environment } from '../../environments/environment';
import { User } from './../_models/user';
import { Injectable } from '@angular/core';



@Injectable({
  providedIn: 'root'
})
export class UserService {
  baseUrl = environment.apiUrl + 'users';

constructor(private http: HttpClient) { }

getUsers(): Observable<User[]> {
  return this.http.get<User[]>(this.baseUrl + 'users');
}

getUser(id): Observable<User> {
  return this.http.get<User>(this.baseUrl + 'users/' + id);
}

}

user.service.ts

import { Injectable } from '@angular/core';
import * as alertify from 'alertifyjs';

@Injectable({
  providedIn: 'root'
})
export class AlertifyService {

constructor() { }

  // tslint:disable-next-line:typedef
  confirm(mesaage: string, okCallback: () => any) {
    alertify.confirm(mesaage, (e: any) => {
      if (e) {
        okCallback();
      } else{}
    });
  }

  // tslint:disable-next-line:typedef
  success(message: string){
    alertify.success(message);
  }

  // tslint:disable-next-line:typedef
  error(message: string){
    alertify.error(message);
  }

  // tslint:disable-next-line:typedef
  warning(message: string){
    alertify.warning(message);
  }

  // tslint:disable-next-line:typedef
  messagee(message: string){
    alertify.message(message);
  }


}

import { environment } from '../../environments/environment';
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';
import { JwtHelperService } from '@auth0/angular-jwt';



@Injectable({
  providedIn: 'root'
})
export class AuthService {
  baseUrl = environment.apiUrl + 'auth/';
  jwtHelper = new JwtHelperService();
  decodedToken: any;

constructor(private http: HttpClient) { }

// tslint:disable-next-line:typedef
login(model: any) {
  return this.http.post(this.baseUrl + 'login', model).pipe(
    map((response: any) => {
      const user = response;
      if (user) {
        localStorage.setItem('token', user.token);
        this.decodedToken = this.jwtHelper.decodeToken(user.token);
        console.log(this.decodedToken);
      }
    })
  );
}

// tslint:disable-next-line:typedef
register(model: any) {
  return this.http.post(this.baseUrl + 'register', model);
}

// tslint:disable-next-line:typedef
loggedIn() {
  const token = localStorage.getItem('token');
  return !this.jwtHelper.isTokenExpired(token);
}

}

import { Observable } from 'rxjs';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { environment } from '../../environments/environment';
import { User } from './../_models/user';
import { Injectable } from '@angular/core';



@Injectable({
  providedIn: 'root'
})
export class UserService {
  baseUrl = environment.apiUrl + 'users';

constructor(private http: HttpClient) { }

getUsers(): Observable<User[]> {
  return this.http.get<User[]>(this.baseUrl + 'users');
}

getUser(id): Observable<User> {
  return this.http.get<User>(this.baseUrl + 'users/' + id);
}

}

member-detail.component.ts

import { AlertifyService } from '../../_services/alertify.service';
import { UserService } from '../../_services/user.service';
import { User } from '../../_models/user';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-member-list',
  templateUrl: './member-list.component.html',
  styleUrls: ['./member-list.component.css']
})
export class MemberListComponent implements OnInit {
  users: User[];

  constructor(private userService: UserService, private alertify: AlertifyService, private route: ActivatedRoute) { }

  // tslint:disable-next-line:typedef
  ngOnInit() {
    this.route.data.subscribe(data => {
      // tslint:disable-next-line:no-string-literal
      this.users = data['users'];
    });
  }

 /* // tslint:disable-next-line: typedef
  loadUsers() {
    this.userService.getUsers().subscribe((users: User[]) => {
      this.users = users;
    }, error => {
      this.alertify.error(error);
    });
  }*/
  }

import { UserService } from '../../_services/user.service';

import { AlertifyService } from '../../_services/alertify.service';
import { User } from '../../_models/user';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { NgxGalleryAnimation, NgxGalleryImage, NgxGalleryOptions } from '@kolkov/ngx-gallery';



@Component({
  selector: 'app-member-detail',
  templateUrl: './member-detail.component.html',
  styleUrls: ['./member-detail.component.css']
})
export class MemberDetailComponent implements OnInit {
  user: User;
  galleryOptions: NgxGalleryOptions[];
  galleryImages: NgxGalleryImage[];

  constructor(private userService: UserService, private alertify: AlertifyService, private route: ActivatedRoute) { }

  // tslint:disable-next-line:typedef
  ngOnInit() {
    this.route.data.subscribe(data => {
      // tslint:disable-next-line:no-string-literal
      this.user = data['user'];
    });

    this.galleryOptions = [
      {
        width: '500px',
        height: '500px',
        imagePercent: 100,
        thumbnailsColumns: 4,
        imageAnimation: NgxGalleryAnimation.Slide,
        preview: false
      }
    ];
    this.galleryImages = [];
  }

  // tslint:disable-next-line:typedef
  getImages() {
    const imageUrls = [];
    for (const photo of this.user.photos) {
      imageUrls.push({
        small: photo.url,
        medium: photo.url,
        big: photo.url,
        description: photo.description
      });
    }
  }


  /*/ tslint:disable-next-line: typedef
  loadUser(){
    // tslint:disable-next-line:no-string-literal
    this.userService.getUser(+this.route.snapshot.params['id']).subscribe((user: User) => {
      this.user = user;
    }, error => {
      this.alertify.error(error);
    });
  }*/
}

import { User } from '../../_models/user';
import { Component, Input, OnInit } from '@angular/core';
import { AuthService } from '../../_services/auth.service';
import { UserService } from '../../_services/user.service';
import { AlertifyService } from '../../_services/alertify.service';


@Component({
  selector: 'app-member-card',
  templateUrl: './member-card.component.html',
  styleUrls: ['./member-card.component.css']
})
export class MemberCardComponent implements OnInit {
  @Input() user: User;

  // tslint:disable-next-line: variable-name
  constructor(private _authService: AuthService, private _userService: UserService, private _alertifyService: AlertifyService) {}

  // tslint:disable-next-line:typedef
  ngOnInit() {
  }

}

会员卡.component.ts

import { AlertifyService } from '../../_services/alertify.service';
import { UserService } from '../../_services/user.service';
import { User } from '../../_models/user';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-member-list',
  templateUrl: './member-list.component.html',
  styleUrls: ['./member-list.component.css']
})
export class MemberListComponent implements OnInit {
  users: User[];

  constructor(private userService: UserService, private alertify: AlertifyService, private route: ActivatedRoute) { }

  // tslint:disable-next-line:typedef
  ngOnInit() {
    this.route.data.subscribe(data => {
      // tslint:disable-next-line:no-string-literal
      this.users = data['users'];
    });
  }

 /* // tslint:disable-next-line: typedef
  loadUsers() {
    this.userService.getUsers().subscribe((users: User[]) => {
      this.users = users;
    }, error => {
      this.alertify.error(error);
    });
  }*/
  }

import { UserService } from '../../_services/user.service';

import { AlertifyService } from '../../_services/alertify.service';
import { User } from '../../_models/user';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { NgxGalleryAnimation, NgxGalleryImage, NgxGalleryOptions } from '@kolkov/ngx-gallery';



@Component({
  selector: 'app-member-detail',
  templateUrl: './member-detail.component.html',
  styleUrls: ['./member-detail.component.css']
})
export class MemberDetailComponent implements OnInit {
  user: User;
  galleryOptions: NgxGalleryOptions[];
  galleryImages: NgxGalleryImage[];

  constructor(private userService: UserService, private alertify: AlertifyService, private route: ActivatedRoute) { }

  // tslint:disable-next-line:typedef
  ngOnInit() {
    this.route.data.subscribe(data => {
      // tslint:disable-next-line:no-string-literal
      this.user = data['user'];
    });

    this.galleryOptions = [
      {
        width: '500px',
        height: '500px',
        imagePercent: 100,
        thumbnailsColumns: 4,
        imageAnimation: NgxGalleryAnimation.Slide,
        preview: false
      }
    ];
    this.galleryImages = [];
  }

  // tslint:disable-next-line:typedef
  getImages() {
    const imageUrls = [];
    for (const photo of this.user.photos) {
      imageUrls.push({
        small: photo.url,
        medium: photo.url,
        big: photo.url,
        description: photo.description
      });
    }
  }


  /*/ tslint:disable-next-line: typedef
  loadUser(){
    // tslint:disable-next-line:no-string-literal
    this.userService.getUser(+this.route.snapshot.params['id']).subscribe((user: User) => {
      this.user = user;
    }, error => {
      this.alertify.error(error);
    });
  }*/
}

import { User } from '../../_models/user';
import { Component, Input, OnInit } from '@angular/core';
import { AuthService } from '../../_services/auth.service';
import { UserService } from '../../_services/user.service';
import { AlertifyService } from '../../_services/alertify.service';


@Component({
  selector: 'app-member-card',
  templateUrl: './member-card.component.html',
  styleUrls: ['./member-card.component.css']
})
export class MemberCardComponent implements OnInit {
  @Input() user: User;

  // tslint:disable-next-line: variable-name
  constructor(private _authService: AuthService, private _userService: UserService, private _alertifyService: AlertifyService) {}

  // tslint:disable-next-line:typedef
  ngOnInit() {
  }

}

我在这里发布了所有相关的ts组件，问题是这些组件中是否存在问题。ts组件还是html中存在问题，我真的不明白问题是什么，因为它以前没有出现任何问题。

现在可以工作了（我在routes.ts路径“”中删除）但单击“不显示任何内容”后，重叠的照片应显示一张照片

这是我的member-detail.component.html：

<div class="container mt-4">
    <div class="row">
        <div class="col-sm-4">
            <div class="card">
                <img class="card-img-top img-thumbnail" src="{{user.photoUrl}} " alt="{{user.knownAs}} ">
                <div class="card-body ">
                    <div>
                        <strong>Location:</strong>
                        <p>{{user.city}}, {{user?.country}}</p>
                    </div>
                    <div>
                        <strong>Age:</strong>
                        <p>{{user.age}}</p>
                    </div>
                    <div>
                        <strong>Last Active:</strong>
                        <p>{{user.lastActive}}</p>
                    </div>
                    <div>
                        <strong>Member since:</strong>
                        <p>{{user.created}}</p>
                    </div>
                </div>
                <div class="card-footer ">
                    <div class="btn-group d-flex">
                        <button class="btn btn-primary w-100">Like</button>
                        <button class="btn btn-success w-100">Message</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-8">
            <div class="tab-panel">
                <tabset class="member-tabset">
                    <tab heading="About {{user.knownAs}}">
                        <h4>Description</h4>
                        <p>{{user.introduction}}</p>
                        <h4>Looking For</h4>
                        <p>{{user.lookingFor}}</p>
                    </tab>
                    <tab heading="Interests">
                        <h4>Intertests</h4>
                        <p>{{user.interests}}</p>
                    </tab>
                    <tab heading="Photos">
                        <ngx-gallery [options]="galleryOptions" [images]="galleryImages" class="ngx-gallery"></ngx-gallery>
                    </tab>
                    <tab heading="Messages">
                        <p>Messages will go here</p>
                    </tab>
                </tabset>

            </div>
        </div>
    </div>
</div>>

位置：
{{user.city}，{{user？.country}

年龄：
{{user.age}

上次激活：
{{user.lastActive}

会员自：
{{user.created}

喜欢
消息
描述
{{user.introduction}

寻找
{{user.lookingFor}

相互测试
{{user.interests}}

信息会传到这里

>

---

我将添加更多我拥有的“@kolkov/ngx gallery”模块。

您的后端API是否正在启动并运行良好？如果您的组件首先呈现，至少在postmanCheck中检查时，我的API会工作（添加类似

console.log

，

标记）。如果是，请检查BE是否返回数据。如果是这样，那么它可能在中间，但有点难说。现场测试示例（例如stackblitz）会很好。我应该在哪里添加它呢？在某些特定组件中？能否将member-list.resolver中的“检索数据时出现问题”更改为类似于“检索数据时出现问题，menmber list”，这将查明错误来自哪个文件