cyclejs extrahieren Ziel aus dem Eingabetext während Karte Betriebes

Question

Main.ts 

    const clickMessages$ = sources.DOM 
      .select('.add') 
      .events('click'); 

     const latitudeMinimum$ = sources.DOM 
      .select('.latitudeMinimum') 
      .events('input'); 

     const latitudeMaximum$ = sources.DOM 
      .select('.latitudeMaximum') 
      .events('input'); 


     const latituteRange$ = xs.combine(latitudeMinimum$, latitudeMaximum$); 

     const newStream$ = xs.combine(clickMessages$, latituteRange$); 
     const filter$ = newStream$.filter(c => { return true }); 
     const map$ = filter$.map(([a, [b, c]]) => { return [b.target.value, c.target.value] } 
// <<--- b.target.value won't compile... was expecting to get my value from input field 

Answer 1

Die Sache ist, die target ein DOM-Ereignis vom Typ EventTarget wie Sie hier https://github.com/Microsoft/TypeScript/blob/master/src/lib/dom.generated.d.ts#L3661 Der generische EventTarget Typ nur sehen können, ein paar Methoden hat.

In Ihrem Fall wissen Sie genau, welche Art von Element im Ziel sein wird. Also, um den Compiler zu sagen, dass Ihr target die value Eigenschaft hat, müssen Sie es in einer konkreteren Art werfen (`Htmlinputelement zum Beispiel https://github.com/Microsoft/TypeScript/blob/master/src/lib/dom.generated.d.ts#L5248)

ich Sie nicht denken, kann das tun in einem einzigen Schuss (oder zumindest bin ich mir einer Technik nicht bewusst, um dies zu tun), also würden Sie eine andere map benötigen.

const latitudeMinValue$ = latitudeMinimum$ 
    .map(event => event.target) 
    .map((element: HTMLInputElemnet) => element.name) 

const latitudeMaxValue$ = latitudeMaximum$ 
    .map(event => event.target) 
    .map((element: HTMLInputElemnet) => element.name) 

const latituteRange$ = xs.combine(latitudeMinValue$, latitudeMaxValue$) 
    .map(/*([minValue, maxValue])*/); 

Ein noch sauberer Weg, dies zu tun (wie wir die map().map() zweimal wiederholen, so sind wir nicht sehr trocken) können wir die compose Betreiber von xstream gegeben verwenden können.

function eventToTargetValue(event$ Stream<Event>) { 
    return event$.map(event => event.target) 
    .map((element: HTMLInputElement) => element.value) 
} 

const latitudeMinValue$ = latitudeMinimum$ 
    .compose(eventToTargetValue) 

const latitudeMaxValue$ = latitudeMaximum$ 
    .compose(eventToTargetValue) 

const latituteRange$ = xs.combine(latitudeMinValue$, latitudeMaxValue$) 
    .map(/*([minValue, maxValue])*/); 

Hoffe, es hilft :)