javascript - Angular 2 组件 DOM 在 OnInit 方法中被解析之前绑定(bind)到组件中的属性

coder 2024-12-30 原文

我正在学习 Angular 2 并尝试按照他们的教程进行操作。这是返回模拟对象文件夹的“Promise”的服务代码。

import {Injectable, OnInit} from "@angular/core";
import {FOLDER} from "./mock-folder";
import {Folder} from "./folder";
@Injectable()
export class FolderService {
  getFolder():Promise<Folder>{
    return Promise.resolve(FOLDER);
  }
}

它在我的 FolderModule 的提供者中声明

import {NgModule} from "@angular/core";
import {CommonModule} from "@angular/common";
import {FolderComponent} from "./folder.component";
import {MaterialModule} from "@angular/material";
import {FolderService} from "./folder.service";
@NgModule({
  imports:[CommonModule, MaterialModule.forRoot()],
  exports:[FolderComponent],
  declarations:[FolderComponent],
  providers:[FolderService]
})
export class FolderModule{

}

Folder 组件应该导入 FolderService 并使用它来获取 Folder 对象。

import {Component, OnInit} from "@angular/core";
import {Folder} from "./folder";
import {FolderService} from "./folder.service";
@Component({
  selector: 'folder',
  moduleId: module.id,
  templateUrl: "./folder.component.html"
})
export class FolderComponent implements OnInit {
  folder:Folder;

  constructor(private folderService:FolderService) {
  }
  ngOnInit():void {
    this.getFolder();
  }
  getFolder() {
    this.folderService.getFolder().then((folder) => this.folder = folder);
  }
}

是的，我确实在根模块中导入了我的 FolderModule

@NgModule({
  imports: [BrowserModule, CommonModule, MaterialModule.forRoot(), FolderModule, AppRoutingModule],
  providers:[],
  declarations: [AppComponent, LifeMapComponent, MyPageNotFoundComponent],
  bootstrap: [AppComponent]
})
export class AppModule {
}

这里是文件夹组件模板

<md-grid-list cols="3" [style.background] ="'lightblue'" gutterSize="5px">
  <md-grid-tile *ngFor="let card of folder.cards">{{card.title}}</md-grid-tile>
</md-grid-list>

这是我在控制台中得到的错误

EXCEPTION: Uncaught (in promise): Error: Error in http://localhost:3000/app/folders/folder.component.html:1:16 caused by: Cannot read property 'cards' of undefined TypeError: Cannot read property 'cards' of undefined

export class Folder {
  public id:number;
  public title:string;
  public cards:Card[];
}

export class Card{
  id :number;
  title:string;
}

最佳答案

沃兰德

这可以通过对正在迭代的集合使用“Elvis”运算符来解决。

<md-grid-tile *ngFor="let card of folder.cards">{{card.title}}</md-grid-tile>

应该改为:

<md-grid-tile *ngFor="let card of folder?.cards">{{card?.title}}</md-grid-tile>

注意“？”在文件夹之后——这会将整个路径强制为“null”，因此它不会重复。问题出在空对象上的访问器。

您也可以将文件夹声明为空数组 [] 以防止出现这种情况。

编辑:对于任何旁观者，请注意 Elvis 运算符在您的 Typescript 代码中不可用，因为该语言不支持它。我相信 Angular 2 支持它，所以它在您的 View 中可用(对于 AJAX 请求非常有用，您的数据还没有到达组件实例化点!)

关于javascript - Angular 2 组件 DOM 在 OnInit 方法中被解析之前绑定(bind)到组件中的属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41641548/

有关javascript - Angular 2 组件 DOM 在 OnInit 方法中被解析之前绑定(bind)到组件中的属性的更多相关文章

ruby - ruby 中的 TOPLEVEL_BINDING 是什么？ - 2
它不等于主线程的binding，这个toplevel作用域是什么？此作用域与主线程中的binding有何不同？>ruby-e'putsTOPLEVEL_BINDING===binding'false 最佳答案事实是，TOPLEVEL_BINDING始终引用Binding的预定义全局实例，而Kernel#binding创建的新实例>Binding每次封装当前执行上下文。在顶层，它们都包含相同的绑定(bind)，但它们不是同一个对象，您无法使用==或===测试它们的绑定(bind)相等性。putsTOPLEVEL_BINDINGput
ruby-on-rails - 创建 ruby 数据库时惰性符号绑定(bind)失败 - 2
我正在尝试在Rails上安装ruby，到目前为止一切都已安装，但是当我尝试使用rakedb:create创建数据库时，我收到一个奇怪的错误:dyld:lazysymbolbindingfailed:Symbolnotfound:_mysql_get_client_infoReferencedfrom:/Library/Ruby/Gems/1.8/gems/mysql2-0.3.11/lib/mysql2/mysql2.bundleExpectedin:flatnamespacedyld:Symbolnotfound:_mysql_get_client_infoReferencedf
ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2
我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的
ruby - ruby 中绑定(bind)对象的实际使用 - 2
昨晚，我在思考我认为是高级ruby语言的功能，即Continuations(callcc)和Bindingobjects。我的意思是高级，因为我有静态类型的oo语言背景(C#、Java、C++)，我最近才发现ruby，所以这些语言特性对我来说不是很熟悉。我想知道这些语言功能在现实世界中的用途是什么。根据我的经验，一切都可以用静态类型的oo语言来完成，但有时我不太同意。我想我在阅读SamRuby的那篇好文章时发现了Continuation的美妙之处/兴趣:http://www.intertwingly.net/blog/2005/04/13/Continuations-for-C
ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2
我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案那是一个javascript链接。Mechan
javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2
我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？最佳答案如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文
ruby - svn ruby 绑定(bind)是否作为 gem 提供？ - 2
我看到有几十个与svn相关的gem，但是我在其中任何一个上找到的少量文档表明它们是命令行包装器和杂项帮助程序。(svn命令、svn钩子(Hook)等)我在野外看到过执行以下操作的代码:require'svn/core'和SVN.Repos.add(...)，但该模块的作者通过apt-get提取了他的svnruby工具。这对我来说不是一个选择，因为我正在开发一个windows/osx工具。Thispage列出了一些项目，但特别是，我需要一些可以访问svn+ssh存储库的东西，而且我没有时间花一半的时间来挖掘文档-十几个项目，试图引导每一个。我在寻找哪个gem？从那里开始，我很乐意挖掘
ruby-on-rails - 我将 Rails3 与 tinymce 一起使用。如何呈现用户关闭浏览器javascript然后输入xss？ - 2
我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中，html表单使用tinymce将“content”列设置为textarea字段。在首页，因为使用了tinymce，post.html.erb的代码需要用这样的原始方法来实现。.好的，现在如果我关闭浏览器javascript，这个文本区域可以在没有tinymce的情况下输入，也许用户会输入任何xss，比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中，但sanitize方法将相互过滤tinymce样式。例如
ruby-on-rails - 如何将 rvm 与 eclipse 的设置绑定(bind) - 2
我正在为不同的应用程序使用多个ruby实例和gemset进行开发。为了在我的ruby版本和gemset之间切换，我使用.rvmrc文件。我还使用带有radrails插件的Eclipse作为我的开发工具。有什么方法可以让eclipse使用rvm在不同的gemsets和ruby版本之间自动切换？最佳答案 Gointoyourprojectdirectoryandcreateafilecalled.rvmrccontainingtheline:rvmuseruby-1.8.7-p330@testing--default(or
ruby - Watir 无法找到我在 Chrome 的 DOM 检查器中看到的元素 - 2
这是一个研究案例:......我正在尝试使用WatirRuby的API引用名为“bar”的嵌入元素。该元素由Chrome的DOM检查器显示，但我无法使用Watir的任何查找方法找到它:browser.embeds()#onlyisfoundbrowser.html.include?'bar'#=>false为什么会这样？为什么Watir不显示完整的HTML？如果我有不同框架中的元素或由Javascript初始化函数动态插入的元素，是否可以使用Watir访问它们？谢谢最佳答案如果元素在框架中，你必须使用这样的东西:browser.

javascript - Angular 2 组件 DOM 在 OnInit 方法中被解析之前绑定(bind)到组件中的属性

有关javascript - Angular 2 组件 DOM 在 OnInit 方法中被解析之前绑定(bind)到组件中的属性的更多相关文章

随机推荐