api - @input 变量的角度未定义值
问题描述
我是 Angular 的新手,遇到了一些问题,希望你能帮助我。所以我试图将一个变量的值从 ProjectComponent 共享到 AcceuilComponent ,这个变量的值正确显示到我的 acceuil.component.html 但是当我尝试将它用于我的 acceuil.component.ts 它是未定义的!
project.component.html (the parent component)
<app-header-in></app-header-in>
<ng-sidebar-container>
<ng-sidebar [opened]="opened">
<p> Sidebar </p>
<button (click)="Sidebar()">
Close Sidebar
</button>
<ul class="menu">
<li class="hh"
*ngFor="let project of projects"
[class.selected]="project === selectedProject"
(click)="onSelect(project)">
{{project.nomprojet}}</li>
</ul>
</ng-sidebar>
<div ng-sidebar-content >
<br><br><br><br>
<button (click)="Sidebar()">
Open Sidebar
</button>
<app-acceuil [message]="idProject"></app-acceuil>
</div>
</ng-sidebar-container>
project.component.ts
import { Component, OnInit } from '@angular/core';
import { ApiService } from '../api.service';
import {ProjectService} from '../project.service';
import {PartService} from '../part.service';
@Component({
selector: 'app-project',
templateUrl: './project.component.html',
styleUrls: ['./project.component.css']
})
export class ProjectComponent implements OnInit {
opened=true;
projects:any;
idProject;
selectedProject;
constructor(private projectService:ProjectService) { }
ngOnInit(): void {
this.projectService.getProjects().subscribe((result)=>{console.log("result",result)
this.projects=result})
}
Sidebar(){
this.opened=!this.opened;
}
onSelect(pro): void {
this.idProject = pro.id;
}
}
acceuil.component.html (my child component)
<p>{{message}}</p>
<ul >
<li class="hh"
*ngFor="let part of parts">
{{part.nomparti}}
</li>
</ul>
acceuil.component.ts
import { Component, OnInit,Input } from '@angular/core';
import { ApiService } from '../api.service';
import {PartService} from '../part.service';
@Component({
selector: 'app-acceuil',
templateUrl: './acceuil.component.html',
styleUrls: ['./acceuil.component.css']
})
export class AcceuilComponent implements OnInit {
@Input() message;
parts:any;
constructor(private partService:PartService) {
}
ngOnInit(): void{
console.log("id",this.message);
this.partService.getPartsFromIdProject(this.message).subscribe((result)=>{console.log("result",result)
this.parts=result})
}
ngOnChanges() {
if(this.message) {
console.log(this.message)
}
}
}
我正在使用消息来调用服务并显示数据。在 acceuil.component.html<p>{{message}}</p>
中显示正确,但console.log("id",this.message);
在 acceuil.component.ts 中显示未定义
解决方案
由于 message 是一个输入属性,您需要在 ngOnchanges 生命周期中获取它的值。
第一次,当它在 ngOnChanges 中时,输入值将是未定义的。因此,为了安全起见,最好添加一个检查未污染的条件,如下所示
ngOnChanges(changes: SimpleChanges) {
if (changes.message) {
// Should be defined now
console.log(this.message);
}
}
推荐阅读
- r - 在 dplyr 的 summarise_at 中使用条件
- excel - 我如何获得一个动态数组,我将它调暗为什么?VBA
- r - 如何绘制循环伏安法的路径
- javascript - 如何将变量传递给引导模式表单并运行 mysql 查询
- vb.net - 过滤后复制数据并将其传输到另一个datagridview
- python - 删除列表中的元素给定一个引用这些元素的矩阵
- typescript - 特定字符串值的打字稿数组
- c++ - ceil、floor 和 round 函数会放大精度损失问题的严重程度,以及如何消除这种影响?
- python - 如何将 3D 令牌嵌入结合到 2D 向量中?
- java - 如何修复 androidx.appcompat.widget.AppCompatButton 无法转换为 com.rey.material.widget.Button