当有新值时，我的changeDetector不会更新视图。
parent.component.html
<div class="container d-flex align-items-center justify-content-center loading-div" *ngIf="_isLoading">
<div class="typing-spinner">
<div class="ball hu-background-color_accent"></div>
<div class="ball hu-background-color_accent"></div>
<div class="ball hu-background-color_accent"></div>
</div><br><br>
Loading...
</div>
<section class="screen-three">
<div class="screen-content">
<div class="bk-chat-bubble">
<div class="container">
<div class="bk-chat left">
<div class="bk-message col-9 col-md-10 offset-3 offset-md-2">
<figure class="bk-avtar"></figure>
<div class="bubble-text">
<h2 class="mt-0">Careers</h2>
<p>Subtitle to careers, taking up two lines</p>
</div>
</div>
</div>
</div>
</div>
<div class="career-list pb-1">
<div class="container">
<div *ngIf="_careers; else showLoading" class="careers-grid">
<div class="row career-item" *ngIf="_careers.length == 0">
<div class="col-12">
<h3 class="text-center">No records found</h3>
</div>
</div>
<div class="row career-item" *ngFor="let career of _careers">
<div class="col-8 col-md-12 p-0">
<h3 class="m-0">{{ career.name }}</h3>
<!-- Start: For Desktop only -->
<span class="bk-number d-none d-md-inline-block">
{{ career.meanSalaryDiff | roundOffNearestHundred : 'USD' : 'symbol' : '1.0-0' }}
<i class="delta up"></i>
</span>
<!-- End: For Desktop only -->
</div>
<!-- Start: For mobile only -->
<div class="col-4 col-md-12 p-0 text-right text-md-left d-block d-sm-block d-md-none">
<span class="bk-number">
{{ career.meanSalaryDiff | roundOffNearestHundred : 'USD' : 'symbol' : '1.0-0' }}
<i class="delta up"></i>
</span>
<a href="javascript: void(0)" class="text-link" (click)="showModal(career.name)">Learn More</a>
</div>
<!-- End: For mobile only -->
<!-- Start: For Desktop only -->
<a href="#" class="text-link d-none d-md-block" data-toggle="modal" data-target="#exampleModal">Learn More</a>
<!-- End: For Desktop only -->
</div>
</div>
<ng-template #showLoading>
<div class="row justify-content-center careers-loading"><i class="fas fa-spinner fast-spin"></i></div>
</ng-template>
</div>
</div>
</div>
</section>
<!-- Modal window code -->
<app-modal [careerDetails]="careerDetails"></app-modal>
parent.component.ts
import { Component, OnInit, Input } from '@angular/core';
import { CurrencyPipe } from '@angular/common';
import { AppService } from '../../_services/app.service';
// Include helpers
import { RoundOffNearestHundredPipe } from '../../_helpers/round-off-nearest-hundred.pipe';
declare var $;
@Component({
selector: 'app-user-career-overview',
templateUrl: './user-career-overview.component.html',
styleUrls: ['./user-career-overview.component.scss']
})
export class UserCareerOverviewComponent implements OnInit {
@Input('careers') _careers: any = [];
_isLoading = false;
careerDetails: any;
constructor(private _appService: AppService) { }
ngOnInit() { }
showModal(designation: string) {
this._isLoading = true;
const params = {
designation
};
this._appService.getCareerDetails(params)
.subscribe(careerDetail => {
this._isLoading = false;
this.careerDetails = careerDetail;
$('#exampleModal').modal('show');
},
error => {});
}
}
child.component.html
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content bk-modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div class="modal-body bk-modal">
<div class="col-11 p-0">
<h1 class="mt-0">{{ _careerDetail?.name }}</h1>
</div>
<p class="mt-5 pb-5">{{ _careerDetail?.description }}</p>
<h2 class="mt-3 mb-0">Top Skills</h2>
<div class="skill-carousel v-list">
<ul class="skill-slides">
<li class="skill-item">
<div class="skill-content">
<div class="row">
<div class="col-8">
<h3 class="mt-0">Project <br>Management</h3>
</div>
<!-- Start: Skill Levels Visualizations -->
<div class="col-4 pl-0 text-right">
<!-- Three dots = {necessary skills+specialized skills} -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="4" cy="20" r="4" fill="#394BEA"/>
<circle cx="20" cy="20" r="4" fill="#394BEA"/>
<circle cx="12" cy="4" r="4" fill="#394BEA"/>
</svg>
</div>
<!-- End: Skill Levels Visualizations -->
</div>
<p>Text changes to be something slightly more promotional for the courses below lorem
ipsum three lines.</p>
<a class="text-link bk-chevron courses-trigger collapsed" data-text="Learn Public Management"
data-toggle="collapse" data-target="#leran01-courses">
Learn Project Management
</a>
</div>
<!-- Skill 1 - Courses -->
<div id="leran01-courses" class="collapse">
<ul class="courses-list">
<li>
<img src="../../../assets/images/udemy-logo.svg" alt="Udemy">
<a href="https://www.udemy.com/courses/business/project-management/" target="_blank" class="jumplink">Explore
<i class="jumplink"></i></a>
</li>
<li>
<img src="../../../assets/images/coursera.svg" alt="Coursera">
<a href="https://www.coursera.org/courses?query=project-management" target="_blank"
class="jumplink">Explore <i class="jumplink"></i></a>
</li>
<li>
<img src="../../../assets/images/skillshare-logo.svg" alt="Skillshare">
<a href="https://www.skillshare.com/search?query=Project%20Management"
target="_blank" class="jumplink">Explore <i class="jumplink"></i></a>
</li>
</ul>
</div>
</li>
<li class="skill-item">
<div class="skill-content">
<div class="row">
<div class="col-8">
<h3 class="mt-0">Brand <br>Strategy</h3>
</div>
<!-- Start: Skill Levels Visualizations -->
<div class="col-4 pl-0 text-right">
<!-- Four dots = {distinguishing skills+differentiating skills} -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="4" cy="4" r="4" fill="#394BEA"/>
<circle cx="20" cy="4" r="4" fill="#394BEA"/>
<circle cx="4" cy="20" r="4" fill="#394BEA"/>
<circle cx="20" cy="20" r="4" fill="#394BEA"/>
</svg>
</div>
<!-- End: Skill Levels Visualizations -->
</div>
<p>Max three lines blurb that explains this skill, brand strategy, and why it’s good
for your career.</p>
<a class="text-link bk-chevron courses-trigger collapsed" data-text="Learn Brand Strategy"
data-toggle="collapse" data-target="#leran02-courses">
Learn Brand Strategy
</a>
</div>
<!-- Skill 2 - Courses -->
<div id="leran02-courses" class="collapse">
<ul class="courses-list">
<li>
<img src="../../../assets/images/udemy-logo.svg" alt="Udemy">
<a href="https://www.udemy.com/courses/search/?src=ukw&q=Brand%20Strategy" target="_blank" class="jumplink">Explore
<i class="jumplink"></i></a>
</li>
<li>
<img src="../../../assets/images/coursera.svg" alt="Coursera">
<a href="https://www.coursera.org/courses?query=Brand%20Strategy" target="_blank" class="jumplink">Explore
<i class="jumplink"></i></a>
</li>
<li>
<img src="../../../assets/images/skillshare-logo.svg" alt="Skillshare">
<a href="https://www.skillshare.com/search?query=Brand%20Strategy"
target="_blank" class="jumplink">Explore <i class="jumplink"></i></a>
</li>
</ul>
</div>
</li>
<li class="skill-item">
<div class="skill-content">
<div class="row">
<div class="col-8">
<h3 class="mt-0">Public <br>Relations</h3>
</div>
<!-- Start: Skill Levels Visualizations -->
<div class="col-4 pl-0 text-right">
<!-- Two dots = {baseline skills} -->
<svg width="24" height="8" viewBox="0 0 24 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="4" cy="4" r="4" fill="#394BEA"/>
<circle cx="20" cy="4" r="4" fill="#394BEA"/>
</svg>
</div>
<!-- End: Skill Levels Visualizations -->
</div>
<p>Max three lines blurb that explains this skill, brand strategy, and why it’s good
for your career.</p>
<a class="text-link bk-chevron courses-trigger collapsed" data-text="Learn Public Relations"
data-toggle="collapse" data-target="#leran03-courses">
Learn Public Relations
</a>
</div>
<!-- Skill 3 - Courses -->
<div id="leran03-courses" class="collapse">
<ul class="courses-list">
<li>
<img src="../../../assets/images/udemy-logo.svg" alt="Udemy">
<a href="https://www.udemy.com/courses/search/?src=ukw&q=Public%20Relations" target="_blank" class="jumplink">Explore
<i class="jumplink"></i></a>
</li>
<li>
<img src="../../../assets/images/coursera.svg" alt="Coursera">
<a href="https://www.coursera.org/courses?query=Public%20Relations"
target="_blank" class="jumplink">Explore <i class="jumplink"></i></a>
</li>
<li>
<img src="../../../assets/images/skillshare-logo.svg" alt="Skillshare">
<a href="https://www.skillshare.com/search?query=Public%20Relations"
target="_blank" class="jumplink">Explore <i class="jumplink"></i></a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
child.component.ts
import { Component, OnInit, Input, OnChanges, SimpleChanges, ChangeDetectorRef } from '@angular/core';
@Component({
selector: 'app-modal',
templateUrl: './modal.component.html',
styleUrls: ['./modal.component.scss']
})
export class ModalComponent implements OnInit, OnChanges {
@Input() careerDetails: any;
_careerDetail: any;
constructor(private _ref: ChangeDetectorRef) { }
ngOnChanges(changes: SimpleChanges) {
if (!changes.careerDetails.firstChange) {
this._careerDetail = changes.careerDetails.currentValue;
}
}
ngOnInit() {
}
}
问题：我正在从服务中接收数据，可以在child.component.ts的ngOnChanges函数中进行console.log记录
但是，视图中未更新更新的数据。
我错误地实现了Onchanges函数吗？ 任何帮助，不胜感激！
谢谢， Neeraj
答案 0 :(得分：0)
对不起，我不好。
在父级的父级视图中，我有一个额外的子级，未使用。因此删除它可以解决问题。