Question

如何从包含使用html的数组的Observable中获取单个值。我正在运行Angular2 w / Typescript

打字稿

private observable = Observable.of([1,2,3,4,5])

HTML

<p>{{observable[2]}}</p>

即获取由observable

保存的索引2中的数组元素

Answer 1

根据之前的答案。你应该避免两件事（如果可能的话）：

手动.subscribe()。请改用异步管道，以便为您管理订阅。
内部状态，如.subscribe(val => this.val = val)。直接使用流并添加Subject（行为，异步，无论如何），这样就可以在流内关闭完整的逻辑。

您的问题的解决方案是使用组合当前索引，可观察数组和在索引处发出元素来创建流。

public index$ = new BehaviorSubject(2)
public observable$ = Observable.of([1,2,3,4,5])

public elementAtIndex$ = Observable.combineLatest(
  this.index$,
  this.observable$,
  (index, arr) => arr[index]
)

然后在你看来：

<p>{{ elementAtIndex$ | async }}</p>

因此，每次索引/数组更改时，它都会发出适当的值。如果要选择其他索引，例如5，然后执行this.index$.next(5)

或者，如果您只想获得一次，那么

public elementAtIndex2$ = this.observable$.map(arr => arr[2])

Answer 2

您需要订阅observable，然后按索引访问该值：

@Component({
  template: `Value: {{ observableValue[2] }}`
})
export class SampleComponent implements OnInit {

  values = Observable.of([1, 2, 3, 4, 5]);
  observableValue: number[];

  ngOnInit(): void {
     this.values.subscribe(value => this.observableValue = value);
  }

}

Answer 3

如果没有订阅Observable，你就无法获得价值。

...
<connectionStrings>
    <add name="ConnStr_Dev" 
         connectionString="Data Source = DELL-MyName; Initial Catalog = MyDB_Dev; user id = sa; password=myPassword;" 
         providerName="System.Data.SqlClient" />
    <!--<add name="DefaultConnection" 
         connectionString="Data Source=(LocalDb)\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\aspnet-MyApp-20170328111628.mdf;Initial Catalog=aspnet-MyApp-20170328111628;Integrated Security=True"
         providerName="System.Data.SqlClient" />-->
</connectionStrings>
<appSettings>
    <add key="webpages:Version" value="3.0.0.0" />
    <add key="webpages:Enabled" value="false" />
    <add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>
...
<entityFramework>
    <defaultConnectionFactory 
          type="System.Data.Entity.Infrastructure.LocalDbConnectionFactory, EntityFramework">
        <parameters>
            <parameter value="Data Source = DELL-MyName; Initial Catalog = MyDB_Dev; user id = sa; password=myPassword;" />
        </parameters>
    </defaultConnectionFactory>
</entityFramework>

或者您可以在html

中直接使用异步管道

private observable = Observable.of([1,2,3,4,5])

Answer 4

我面临着类似的问题。我可以订阅可观察对象并获取值，但这并不是最好的方法，因为您现在必须处理订阅和取消订阅，内存泄漏以及其他不成功的问题。使用可观察值的最佳方法是使用异步管道“ |”）。所以，这是我建议的解决方案

yourComponent.ts

val lines = sc.textFile("file://../kv/mydata.log")

val lines = sc.textFile("s3n://../kv/mydata.log")

val lines = sc.textFile("hdfs://../kv/mydata.log")

yourComponent.html

source: any = of([1, 2, 3, 4, 5]);

如您所见，将切片与异步管道一起使用的深刻方法可以解决此问题。如果要访问可观察数组的任何元素例如第一个元素就是：-

<div *ngFor = " let s of source | async; let i = index">
{{s}} {{source | async | slice :i:i+1}}
</div>

希望对您有帮助！

在https://angular.io/guide/pipes上了解有关角管的更多信息

在特定索引[html]中获取可观察数组元素

4 个答案: