javascript - 问题详细信息页面无法以角度工作

Question

我创建了所有问题组件，它是可见的，但是当我单击重定向到该 ID 但在 ID 页面上没有详细信息的特定问题视图时。这里我附上了一些文件，

1. 管理服务文件
2. 模型文件
3. 详细问题组件文件
4. 详细问题ts文件
5. 所有问题组件文件
6. 所有问题 ts 文件

admin.service.ts - 这是管理服务文件

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Admin } from "../model/admin";

@Injectable({
  providedIn: 'root'
})
export class AdminService {
  private ROOT_URL =  "http://localhost:3300/questions";

  private httpOptions = {
    headers: new HttpHeaders().set("Content-Type", "application/json")
                              
  };

  constructor(private http: HttpClient) { }

  getQuestion(): Observable<Admin[]> {
    return this.http.get<Admin[]>(this.ROOT_URL);
  } 
  getQue(id: string){
    return this.http.get<Admin>(`${this.ROOT_URL}/${id}`);
  }

  addQue(admin){
    return this.http.post<any>(this.ROOT_URL, admin, this.httpOptions);
  }
}



**model=>admin.ts**  - this is model file

export interface Admin {
    description: String,
    // alternatives: String
    alternatives: [
        {
            text: {
                type: String,
                required: true
            },
            isCorrect: {
                type: Boolean,
                required: true,
                default: false
            }
        }
    ]
}


**que-detail.comp.html** - this is question detail component file

<div class="card">
    <div class="card-body">
        <h4>Question: {{admin.description}}</h4>
        <h4>Options: {{admin.alternatives}}</h4>
    </div>
</div>


**que-detail.comp.ts**  - this is question details ts file

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';
import { Admin } from '../model/admin';
import { AdminService } from '../service/admin.service';

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

  id: string;

  admin: Admin;

  adminSub$: Subscription;

  constructor(private adminService: AdminService, private route: ActivatedRoute ) { }

  ngOnInit(): void {
    this.id = this.route.snapshot.paramMap.get("id");
    this.adminSub$ = this.adminService.getQue(this.id).subscribe(admin => {
      this.admin = admin;
    });
  }

}


**all-que.comp.html** - this is all question component file

<div class="card bg-dark text-white my-4 dashboard-bg">
  <div class="card-body text-center">
    <ul class="questions" *ngIf="admin$ | async as questions">
      <li *ngFor="let question of questions">
          <h4 class="card-title my-2">{{question.description}}</h4>
          <h5 *ngFor="let x of question.alternatives">{{x.text}}</h5>
          <a [routerLink]="question._id">View</a>
      </li>
    </ul>
  </div>
</div>


**all-que.comp.ts** - this is all question ts file

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { Admin } from '../model/admin';
import { AdminService } from '../service/admin.service';

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

  admin$: Observable<Admin[]>;

  constructor(private adminService: AdminService) { }

  ngOnInit(): void {
    this.admin$ = this.adminService.getQuestion()
  }

}

标签： javascriptnode.jsangulartypescript

Answer 1

您的问题详细信息组件应该是这样的，

<div class="card">
<div class="card-body">
    <h4>Question: {{admin.description}}</h4>
    <h5>Options:</h5>
    <ng-container *ngFor="alternative of admin.alternatives">
    <h6>{{alternative.text}}</h6>
    </ng-container>
</div>

您只是在使用未定义的questions变量 ig。