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

问题是，DOM事件的target类型为EventTarget，您可以在此处看到https://github.com/Microsoft/TypeScript/blob/master/src/lib/dom.generated.d.ts#L3661通用EventTarget类型只有几种方法。< / p>

在您的情况下，您确切知道目标中将包含哪种元素。因此，为了告诉编译器您的target具有value属性，您需要将其转换为更具体的类型（例如`HTMLInputElement https://github.com/Microsoft/TypeScript/blob/master/src/lib/dom.generated.d.ts#L5248）

我认为你不能一次性完成这项任务（或者至少我不知道这样做的技巧），所以你需要另一个map。

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])*/);

更简洁的方法（因为我们重复map().map()两次，所以我们不是很干）我们可以使用compose给出的xstream运算符。

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])*/);

希望有所帮助：）

cyclejs在地图操作期间从输入文本中提取目标

1 个答案: