Question

我很难理解ngFor为什么不能使用一系列可观察对象。

<div *ngFor="let dwsubscription of dwsubscriptions | async">
    <p>value: {{dwsubscription.params.data}}</p>
</div>

然后是我的html

getSubscription(device: string, variable: string, type: number, count:number, length:number): Observable<Dwsubscription> {

getSubscriptions返回一个可观察的

import re

def c_set_port_state(portn,ports,values):
    print(portn,ports,values)

class Out:
    def __init__(self, obj):
        self.obj = obj
    def __getitem__(self, i):
        return self.obj._out[i]
    def __setitem__(self, i, value):
        self.obj._out[i] = value
        self.obj.set_out({i:value})

class In:
    def __init__(self, obj):
        self.obj = obj
    def __getitem__(self, i):
        return self.obj.get_in(i)

def _outidx0(key):
    idx = re.match(r'Out(\d)',key).group(1)
    idx0 = int(idx)-1
    return idx0

class _port_descriptor:
    def __init__(self, name):
        self.name = name
        self.idx0 = _outidx0(name)
    def __get__(self, obj, objtype):
        return obj.Out[self.idx0]
    def __set__(self, obj, value):
        obj.Out[self.idx0] = value

class Ports:
    """
    This is an example for dynamic attibutes 
    - that figure in dir() and
    - that IPython can auto-complete

    >>> ports = Ports()
    >>> ports.Out3=0
    1 dict_keys([2]) dict_values([0])
    >>> ports.Out4=1
    1 dict_keys([3]) dict_values([1])
    >>> dir(ports) # doctest: +ELLIPSIS
    ['In', 'Out', 'Out1', 'Out2', 'Out3', 'Out4', 'Out5', 'Out6', 'Out7', 'Out8', ...
    >>> ports.set_out(Out7=3) # doctest: +ELLIPSIS
    Traceback (most recent call last):
     ...
    ValueError: Output ...
    >>> ports.Out7=3 # doctest: +ELLIPSIS
    Traceback (most recent call last):
     ...
    ValueError: Output ...
    >>> ports.set_out(Out7=0)
    1 dict_keys([6]) dict_values([0])
    >>> ports.set_out({0:0,1:0,2:1})
    3 dict_keys([0, 1, 2]) dict_values([0, 0, 1])
    >>> ports.Out[2]
    1
    >>> ports.Out[2] = 0
    1 dict_keys([2]) dict_values([0])
    >>> ports.In[1]
    0

    """
    def __init__(self):
        self._out = dict((i,0) for i in range(8))
        self.Out = Out(self)
        self.In = In(self)
        for i in range(8):
            name = 'Out'+str(i+1)
            pd = _port_descriptor(name)
            setattr(self.__class__,name,pd)
    def set_out(self, out=None, **kwargs):
        if out:
            self._out.update(out)
        if kwargs:
            out = {_outidx0(k):v for k,v in kwargs.items()}
        if not out:
            out = self._out
        if any((value not in [0,1]) for value in out.values()):
            raise ValueError('Output values can only be 0 or 1, but you provided ' + str(out))
        c_set_port_state(len(out),out.keys(),out.values())
    def get_in(self, i):
        return 0 #would call an according c function, too

我遇到了错误

错误错误：InvalidPipeArgument：管道的“ [对象对象]” “ AsyncPipe”

如果我对从getSubscription（）返回的单个可观察对象执行异步管道，则此方法很好。为什么不能将这些可观察的对象推送到数组，然后使用ngFor在我的模板中对其进行遍历？

Answer 1

您正在创建一个可观察对象数组。您必须遍历每个可观察对象，然后对每个可观察对象使用异步管道。

尝试一下：

<div *ngFor="let dwsubscription of dwsubscriptions">
  <div *ngIf="dwsubscription | async as dw">
    <p>value: {{dw.params.data}}</p>
  </div>
</div>

Answer 2

您的问题暗示您想要一个Observables数组。这意味着您需要修复在HTML中引用dwsubscriptions的方式。在您的示例中，dwsubscriptions 不是可观察对象。它是一组Observables。因此，无需在async上使用dwsubscriptions管道；

Heres a quick Stackblitz example

跟踪来自：

<ul>
  <li *ngFor="let obs of dwsubscriptions">
  {{obs | async | json}}
  </li>
</ul>

Answer 3

尝试使用joinFork

this.results = forkJoin(this.locations, this.distances).pipe(
  map(([locations, distances]) => locations.concat(distances))

）;

将ngFor与异步管道一起使用以显示可观察对象数组

3 个答案: