rxjs通过键访问对象值

时间:2020-02-02 17:10:31

标签: angular rxjs observable

我有一个可观察对象,它是具有键值对的对象数组。

我可以通过以下方式访问此数组的第一个元素:

<?xml version="1.0" encoding="utf-8"?>
<Project Sdk="Microsoft.NET.Sdk.Web">
  <PropertyGroup>
    <TargetFramework>netcoreapp3.1</TargetFramework>
    <RootNamespace>WebApp_001</RootNamespace>
  </PropertyGroup>
  <PropertyGroup Condition=" '$(RunConfiguration)' == 'TheMidtownModel' ">
    <StartAction>Project</StartAction>
    <ApplicationURL>http://localhost:5002</ApplicationURL>
  </PropertyGroup>
  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore" Version="2.2.0" />
    <PackageReference Include="Microsoft.EntityFrameworkCore" Version="3.1.0" />

    <PackageReference Include="Microsoft.EntityFrameworkCore.Design" Version="3.1.0">
      <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
      <PrivateAssets>all</PrivateAssets>
    </PackageReference>

    <PackageReference Include="Microsoft.EntityFrameworkCore.Relational" Version="3.1.0" />
    <PackageReference Include="Microsoft.Extensions.Primitives" Version="3.1.0" />    
    <PackageReference Include="Microsoft.AspNetCore.Identity.EntityFrameworkCore" Version="3.1.0" />
    <PackageReference Include="Microsoft.AspNetCore.Diagnostics.EntityFrameworkCore" Version="3.1.0" />
    <PackageReference Include="Microsoft.EntityFrameworkCore.SqlServer" Version="3.1.0" />
    <PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite.Core" Version="3.1.0" />     

    <PackageReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Design" Version="3.1.1" />
    <PackageReference Include="Microsoft.AspNetCore.Mvc.RazorPages" Version="2.2.5" />
    <PackageReference Include="Microsoft.AspNetCore.Mvc.TagHelpers" Version="2.2.0" />
    <PackageReference Include="Microsoft.AspNetCore.Routing" Version="2.2.2" />

    <PackageReference Include="Microsoft.AspNetCore.Authentication" Version="2.2.0" />
    <PackageReference Include="Sendgrid" Version="9.12.6" />
    <PackageReference Include="React.AspNet" Version="5.1.2" />
    <PackageReference Include="JavaScriptEngineSwitcher.ChakraCore" Version="3.3.0" />
    <PackageReference Include="JavaScriptEngineSwitcher.ChakraCore.Native.linux-x64" Version="3.3.0" />
    <PackageReference Include="JavaScriptEngineSwitcher.ChakraCore.Native.osx-x64" Version="3.3.0" />
    <PackageReference Include="JavaScriptEngineSwitcher.ChakraCore.Native.win-x64" Version="3.3.0" />
    <PackageReference Include="JavaScriptEngineSwitcher.Extensions.MsDependencyInjection" Version="3.3.0" />
    <PackageReference Include="Twilio.AspNet.Core" Version="5.33.1" />
    <PackageReference Include="Twilio" Version="5.37.3" />
    <PackageReference Include="MySql.Data.EntityFrameworkCore" Version="8.0.19" />
    <PackageReference Include="Npgsql.EntityFrameworkCore.PostgreSQL" Version="3.1.0" />
  </ItemGroup>
  <ItemGroup>
    <Content Remove="wwwroot\css\bootstrap-grid.min.css" />
    <Content Remove="wwwroot\css\bootstrap.min.css" />
    <Content Remove="wwwroot\css\bootstrap.min.css.map" />
    <Content Remove="wwwroot\js copy\__bootstrap.bundle.min.js" />
    <Content Remove="wwwroot\js\bootstrap.js" />
    <Content Remove="BackUpFiles\appsettings.Development.json" />
  </ItemGroup>
  <ItemGroup>
    <Folder Include="Views\Admin\" />
    <Folder Include="Views\RoleAdmin\" />
    <Folder Include="Views\Claims\" />
    <Folder Include="Views\FileUpload\" />
    <Folder Include="Authorization\" />
    <Folder Include="Views\Shared\Layouts\" />
    <Folder Include="Views\Shared\Partial\" />
  </ItemGroup>
  <ItemGroup>
    <Compile Remove="Migrations\20191216040205_SecondUpdateAlbumField.cs" />
    <Compile Remove="Migrations\20191216040205_SecondUpdateAlbumField.Designer.cs" />
    <Compile Remove="Migrations\20191216040329_ThirdUpdateAlbumField.cs" />
    <Compile Remove="Migrations\20191216040329_ThirdUpdateAlbumField.Designer.cs" />
  </ItemGroup>
</Project>

它在控制台中正确记录了该对象。

如果我尝试仅通过以下方式记录newsId

const source = this.store.select('news')。pipe(); const element = source.subscribe(val => console.log(val.news [0] .newsId));

我收到错误消息“无法读取未定义的属性'newsId'”。

如何将对象定义为一个整体,但是如果我尝试访问该对象,则会告诉我该对象未定义?

1 个答案:

答案 0 :(得分:0)

可能有多种原因。

  • 也许新闻数组的第一个元素最初不包含newsId字段,然后控制台中打印的news [0]随后通过引用进行更新
  • 也许新闻数组包含一些undefined值以及有效新闻。

因此,首先尝试记录整个数组val.news,并确保定义了该数组中的所有元素。同时确保所有来自该Observable的事件都与您期望的一样。

无论如何,仅当您计划使用一些rxjs运算符时才需要pipe(),否则在这里就没有任何意义(实际上它会使新手感到困惑)。